点击事件更改URL而不重新加载页面

Question

点击事件更改URL而不重新加载页面

3

我有这样的一段内容：

编辑ID：

echo '<table>';
$row=mysql_fetch_array($query){
 echo '<tr onclick="window.location=\'index.php?id='$row['id']'\'"><td>Row1</td></tr>';
 echo '<tr onclick="window.location=\'index.php?id='$row['id']'\'"><td>Row2</td></tr>';
}
echo '</table>';

当用户点击一个 tr 时，将会显示与 http 请求相匹配的另一张表格。换句话说，我将在一个查询中使用 $_GET['id'] 值：

$sql="SELECT * FROM `table` WHERE `id`='".$_GET['id']."'";
$query=mysql_query($sql,$db);

当点击一行时，会出现另一个表格，其中包含根据用户请求不同的数据。它能正常运行，但唯一的问题是我需要在不重新加载页面的情况下完成此操作。有什么想法吗？由于我在 Js、Ajax 等方面还很新，因此也需要一些示例。

- Petru Lebada

4

跟随一些 AJAX/JS 教程，你就会没问题了。 - Daan

1

还要了解SQL注入以及如何防止它。 - PeeHaa

或者在您的情况下，只需使用一个简单的<a href>。 - Aleksandr Shumilov

需要用另一个“table”替换“table”，还是您想添加一个表格？ - S.Pols

@AlexShumilov，我必须在不重新加载页面的情况下，在包含表格和查询的同一页上完成它... - Petru Lebada

@S.Pols，不，只是数据会根据请求而有所不同。 - Petru Lebada

2个回答

1

通过Ajax，您可以像这样做：

echo '<table>';
 echo '<tr><td><a href="javascript:;" data-id="1" class="load-data">Row1</a></td></tr>';
 echo '<tr><td><a href="javascript:;" data-id="2" class="load-data">Row2</a></td></tr>';
echo '</table>';

然后你的 JavaScript 就可以像这样使用 jQuery：

<script>
$('.load-data').click(function()
{
    var t = $(this);

    $.ajax({ 
        type: 'POST', 
        url: 'PAGE_TO_GET_DATA',
        data: { 'id': t.data('id') }, 
        success: function(data)
        {
            //based on the response you output to load in the content against ID = x, you can target another DOM element and output to that
            $('#output').html(data);
        }
    });
return false;
});
</script>

在您的查询字符串中，对输入进行如下清理：

$sql="SELECT * FROM `table` WHERE `id`='".mysql_real_escape_string($_GET['id'])."'";

p.s. 我半盲地完成了这个任务，但应该可以为你指明正确的方向。

- PHPology

这样做，页面就不会重新加载了吗？ - Petru Lebada

没有 - 尽管有一个 ahref 标签，但 JavaScript 在最后返回 false，因此页面不会重新加载。 - PHPology

如果ID也是一个数据库请求，那么它将是相对的，我不知道是否可以用这种方式实现。 - Petru Lebada

不确定您此处的意思。data-id = ""后面的值可以是任何东西，包括在从数据库加载数据时要使用的ID。 - PHPology

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- S.Pols · Accepted Answer

我的建议是使用数据属性来设置id。就像这样：

<?php

echo '<table id="aTable">';
 echo '<tr data-id="1"><td>Row1</td></tr>';
 echo '<tr data-id="2"><td>Row1</td></tr>';
echo '</table>';    

echo '<table id="anotherTable">';
echo '</table>';

?>

然后使用jQuery来捕获点击事件，代码如下：

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>

    $(document).on('click','#aTable tr', function(e){

        var id = $(this).data('id');
        $('#anotherTable').load('index.php?id='+id);
    });

</script>

在您的索引中，您可以使用以下方式捕获id并打印表格：

<?php

    if(isset($_GET['id']) && is_numeric($_GET['id']))
    {
        //DONT USE mysql_*

        $mysqli = new mysqli("localhost", "user", "password", "database");

        if ($result = $mysqli->query("SELECT * FROM `table` WHERE `id`='".(int)$_GET['id']."'")) 
        {

            while ($row = $result->fetch_assoc()) {
                echo '<tr>';
                echo '<td>'.$result['column1'].'</td>';
                echo '<td>'.$result['column2'].'</td>';
                echo '</tr>';
            }       

        }
        //Add an exit because it's an AJAX call.
        exit;
    }

?>

编辑

对于动态数据属性，您可以使用以下代码：

<?php

    echo '<table id="aTable">';
    while($row = mysql_fetch_array($query))
    {
        echo '<tr data-id="'.$row['id'].'"><td>Row1</td></tr>';
    }    
    echo '</table>';

    echo '<table id="anotherTable">';
    echo '</table>';

?>