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

【问题标题】：Making AJAX request and returning data on same page在同一页面上发出 AJAX 请求并返回数据
【发布时间】：2017-04-06 13:10:41
【问题描述】：

这是我的代码中的 sn-p： 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 小时左右调整了我的代码，但无济于事。我对这些网络技术比较陌生（天哪，有这么多！），我希望有人能提供帮助。

【问题讨论】：

任何屏幕截图
最好将您发送数据的 php 放在单独的文件中。或者你必须在$_POST['query'] isset 时排除其余的（html）。
我从未将“url”设置为空
你应该重新排列你的代码来完成你想要的。把所有代码放在一个文件中是不好的
嗨，杰夫，是的，我做到了，它确实有效，但我真的想在不创建另一个 php 文件的情况下完成此操作。我希望有一些方法可以实现这一目标。

标签： php ajax

【解决方案1】：

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

基本上它建议你不应该echo 而不是exit() 你的回应。否则，页面的其余部分在 if(isset... 完成后再次“加载”。

【讨论】：