javascript - Ajax数据嵌入页面而不是返回正确的结果

Question

我有一个简单的搜索区域，它使用 JavaScript 在用户键入时显示相关搜索结果。下面是它的代码:

<div class="message_content">
    <input type="text" id="user_search" class="form-control search_box" placeholder="Search for people">
    <div id="search_results">
        <span class="no-result" style="line-height: 38px;">Enter your query</span>
    </div>
</div>

以下是lib.js中的JS:

$("input#user_search").keyup(function() {
    var elt = $("input#user_search").val();
    $curr = $(this);
    $.ajax({
        url : "u.search.php",
        type: "GET",
        data : {val: elt},
        success:function(data, textStatus, jqXHR)
        {
            if (data.length) {
                $("div#search_results").html(data);
            }
            else $("div#search_results").html('<span class=\"no-result\">Enter your query</span>');
        },
        error: function(jqXHR, textStatus, errorThrown){}
    });
});

最后，以下是u.search.php的代码:

<?php
$search = strtolower(htmlspecialchars($_GET['val']));

if (strlen($search) < 1);else {
    // Run query on the DB
    ...
    print "<div id=\"search-list\" class=\"list-group\">";
    // populate results
    while ($row = oci_fetch_array($stid, OCI_ASSOC+OCI_RETURN_NULLS))
    {
        // variable declarations
        print "<a href=\"#\" id=\"$result\" class=\"list-group-item\">";
        print     "<img src=\"$pic\">";
        print     "<span>$name</span>";
        print "</a>";
    }
    print "</div>";
}
?>

这里的问题是，如果我在文本框中输入任何内容，index.php页面(搜索框所在的页面)，div#search_results的html变成index.php。如果我在 ajax success 函数中执行 console.log(data) ，控制台会显示index.php页面的代码(不是实际的源代码，而是您可以在浏览器的页面源代码中看到)。

div#search_results 基本上嵌入了index.php。我尝试更改 PHP 后端代码，但结果没有反射(reflect)任何更改。这里出了什么问题？

Answer 1

您正在使用查询字符串来获取搜索变量。但你没有发送任何东西。因此，更改您的 search.php 以使用 POST 或更改 ajax 方法来发送查询字符串...

$.ajax({
        url : "u.search.php?val=" + encodeURIComponent(elt),
        type: "GET",
        success:function(data, textStatus, jqXHR)
        {
            if (data.length) {
                $("div#search_results").html(data);
            }
            else $("div#search_results").html('<span class=\"no-result\">Enter your query</span>');
        },
        error: function(jqXHR, textStatus, errorThrown){}
    });