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 console.log(data)函数中执行success，控制台会显示index.php页面的代码（不是实际的源代码，而是您可以在浏览器的页面源中看到的代码）。

div#search_results基本上嵌入了index.php。我尝试更改PHP后端代码，但结果中没有反映更改。这有什么不对？

Answer 1

您正在使用Querystring来获取搜索变量。但你没有发送任何东西。因此，将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){}
    });

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

1 个答案: