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

Question

So currently, I have a php page which displays a list of results which it gets from my sql database. It displays the ID and the names.

I have a search at the top which just searches for keywords in the "name" field then if search is clicked it will take you to a new page which shows the results you have searched for.

What I am trying to do is to make it Asynchronous so when I search for lets say "London" it displays only results which have the keyword London in it, but on the same page.

My search button code:

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

Ajax code which I have tried using to make it asynchronous:

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

I'm new to this so apologies if it's a silly mistake. My searchresults.php just has the SELECT * FROM Property WHERE etc.. and then it echos the results.

Thanks.

Answer 1

You need to have some element on your page that'll hold the search results, eg

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

and then in your .post() call, you'd have a result handler that does

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

Exactly how you actually insert/display the data is up to you - your PHP script could send over a full-blown html snipper, or a nice JSON-encoded data structure and your JS builds up the results, etc... This is just a simple brain-dead "here's some result data and display it as-is".

Answer 2

//Function to call when button is clicked

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);
    });
}

data is the response of php script (may be html code in this case)

var1 & var2 are the names you will find in $_POST vars in php script

"targetDiv" is the id of the target div in wich you will put your content.

Queries are done in your php script.