Question

这是我代码中的代码段：的 page.php文件

<input type="text" id="search_query" style="float: right" placeholder="Search" />
<div id="result"></div>
<table>
    <tr>
        <th><input type="checkbox" name="select_all" id="select_all" value=""/></th>
        <th>Title</th>
        <th>Author</th>
        <th>Date Published</th>
        <th>Actions</th>
    </tr>
    <?php
    if (isset($_POST['query'])) {
        $query = $_POST['query'];
        $res = search_articles($query); // a function I have to query the database with SQL 'LIKE'
    } else {
        $res = view_articles(); // another function
    }
    while ($row = $res->fetch_assoc()) {
        echo '<tr>';
        echo '<td><input type="checkbox" name="checked_id[]" class="checkbox" value="' . $row['id'] . ' ?>"/></td>';
        echo '<td>' . $row['title'] . '</td>';
        echo '<td>' . $row['author'] . '</td>';
        echo '<td>' . $row['date_published'] . '</td>';
        echo '<td>
                <a href="?del=' . $row['id'] . '">Delete</a> | 
                <a href="?edit=' . $row['id'] . '">Edit</a>
            </td>';
        echo '</tr>';
    }
    ?>
</table>

和ajax请求：（也在page.php中）

function load_data(query) {
    $.ajax({
        url: "",
        method: "POST",
        data: {query: query},
        success: function (data) {
            $('#result').html(data);
        }
    });
}
$('#search_query').keyup(function () {
    var search = $(this).val();
    if (search != '') {
        load_data(search);
    } else {
        load_data();
    }
});

基本上，我有一个搜索栏，用户可以在其中键入任何内容，然后我显示列的表格（从数据库表中获取）将动态更改。

我上面的代码工作正常，但每次在搜索栏上输入任何内容时，都会显示页面的精确副本（我页面中的所有内容都会显示两次）。有没有办法让AJAX请求只返回表而不是整个页面？（没有将整个代码移动到单独的php文件中，因为我想在单个文件中完成此操作）

我认为问题是因为我将数据（包含整个页面）传递给#result div。我已经尝试寻找解决方案，并在过去3个小时左右调整了我的代码，但无济于事。我对这些网络技术比较陌生（上帝有这么多！）我希望有人可以提供帮助。

Answer 1

检查此处发布的解决方案Ajax to PHP on the same page

基本上它建议您不应该回显而不是退出（）您的回复。否则，页面的其余部分将被加载＆＃34;再次在之后（isset ... 完成。

发出AJAX请求并在同一页面上返回数据

1 个答案: