Question

以下是用于运行实时搜索的脚本。

<script>
    $(".search").keyup(function() {

        var Team_Name = $('#TeamName').val();
        var Teacher = $('#Teacher').val();

        var Search_Data = Team_Name + '?????' + Teacher;

        $.ajax({
            type: "POST",
            url: "Student Search Results.php",
            data: {
                query: Search_Data
            },
            cache: false,
            success: function() {
                alert('The values were sent');
            }
        });
    });
</script>


<?php

include "Student Search Results.php";

?>

实时搜索功能正常，但不重复（它只在页面首次加载时运行一次）。有没有想过为什么会这样？谢谢。

Answer 1

您将静态流程与动态流程混合在一起。 <?php include() ?>最初将在服务器上运行，不会再在该页面上执行。无论您的AJAX功能提交数据多少次，您的页面都不会因为很久以前已经加载而改变。

您需要做的是完全保留include()并使用JSON或XML直接通过PHP文件回复$.ajax()函数。

然后你可以使用jQuery / JS将数据解析成漂亮而有条理的东西。

以下是更多细节：

在您的PHP页面上，您将听取$_POST['query']并像往常一样运行您的功能。但是现在不是打印它的PHP页面，而是需要将该页面的标记部分与PHP执行分开。

然后，您将获取该标记，并将其置于脚本下方，位于您当前拥有<?php include(); ?>的相同位置。要让jQuery根据需要按需更新，请更改：

...
success: function() {
   alert();
}

从PHP页面传递返回的数据，如下所示：

...
success: function(data) {
    var i = 0;
    for (i in data) {
        $('#searchResults').find('.resultNumber').append(i++);
        $('#searchResults').find('.team-name').append(data.teamName);
        $('#searchResults').find('.teacher').append(data.teacher);
    }
}

此处是<table id="searchResults">以及<td>和<tr>等等。

使用jQuery的AJAX Live Search只运行一次

1 个答案: