使用ajax根据搜索结果显示结果？

Question

因此，目前，我有一个php页面，其中显示了从sql数据库获取的结果列表。 它显示ID和名称。

我在顶部进行搜索，仅在“名称”字段中搜索关键字，然后单击搜索将带您到一个新页面，该页面显示了您搜索的结果。

我想做的是使其异步，因此当我搜索让我说“伦敦”时，它只在其中包含关键字伦敦的结果显示在同一页面上。

我的搜索按钮代码：

    <input type="button" class="search" value= "Search">

我尝试过使用使其异步的Ajax代码：

 $(document).ready(function() {
 $(".search").each(function() {
 var btn = $(this);
 btn.on("click", function(){
 $.post("searchresults.php",
 function(data){
 .append(data);}
 }}})

我对此很陌生，所以很抱歉这是一个愚蠢的错误。 我的searchresults.php仅具有SELECT * FROM Property WHERE等。然后，它回显结果。

谢谢。

Answer 1

您需要在页面上有一些元素来保存搜索结果，例如

<div id="result"></div>

然后在您的.post()调用中，您将有一个结果处理程序

function (results) {
    $('#result').text(results);
}

实际插入/显示数据的方式完全由您决定-您的PHP脚本可以通过完整的html截屏器发送，也可以通过漂亮的JSON编码的数据结构发送，而JS可以建立结果，等等。一个简单的大脑死亡，“这里有一些结果数据并按原样显示”。

Answer 2

//点击按钮时调用的函数

function getData(){

    //declare any vars you want here
    var variable1='variable1Content';
    var variable2='variable2Content';

    //Post some data to your php script without reloading the page
    $.post('getData.php',{var1:variable1,var2:variable2},function(data){ 

        $("#targetDiv").empty().append(data);
    });
}

数据是php脚本的响应（在这种情况下，可能是html代码）

var1和var2是您将在$ _POST php脚本中找到的名称

“ targetDiv”是目标div的ID，您将在其中放置内容。

查询是在您的php脚本中完成的。