ボタンでphp関数を呼び出すためにajaxを使用すると、リフレッシュ

Question

私はmysqlデータベースの検索ページを作ろうとしています。検索結果は一度に1つずつ表示されますが、[次へ]ボタンと[前へ]ボタンをクリックすると表示されます。私は、これを行うにはAjaxが最善の方法だと理解しています。 私はAjaxについてほとんど知りません。私はちょうどPHPのハングを取得しています。 私はここで検索しましたが、私がしたいことを正確に見つけることができません。私はW3のAjaxセクションを読んだこともあり、この問題は解決していません。

ユーザーがアイテムを検索（mysqlクエリを作成）し、検索結果が一度に1つの結果しか出力しないようにしました。どのようにして次の結果が次のボタンのプレスに表示されるようにすることができますか？前のボタンと同様です。

私はif文とwhile文を動作させようとしましたが、クライアントからサーバへの問題に戻ってくるようです。

PHP変数を使用して各検索結果を表し、ボタンに変数の数値を増減させて、新しい変数で情報を再表示するように指示しました。

助けがあれば助かります。私は1週間以上これに固執してきました。
コード例がさらに役立ちます。

Answer 1

私はやってそれを行うだろう：

つの検索要求は、次および前でそれらを投げるサーバとあなたがナビゲートしようとしている結果のJSON形式の配列を使用してサーバーの応答に-ajax-ボタンを使用すると、1回の検索要求を行うことによって、次回および前回のクリックごとにサーバーへの多数の要求を回避し、サーバーが現在の結果を追跡しないようにします。

---

クライアント側 - JavascriptとはJQuery

<script> 
var results; // the results array that will have all your search results 
var currentresult = 0; // the index of the current result 
//the search ajax function 
function buttonSearchPressed(){ 
    $.ajax({type:"POST",url:"test.php", 
     data:{keyword:$('input#searchkeyword')[0].value} 
     success:function(data){ 
       try{results = JSON.parse(data)}catch(e){alert('error');}  
     } 
    }); 
} 
function previous(){ 
    if(currentresult>0){ 
     currentresult--; 
     $('span#result')[0].innerHTML =results[currentresult]; 
    } 
} 
function next(){ 
    if(currentresult<results.length-1){ 
     currentresult++; 
     $('span#result')[0].innerHTML =results[currentresult]; 
    } 
} 
</script> 

クライアント側 - HTML

<input id="searchkeyword"> 
<button onclick="buttonSearchPressed()">search</button><br> 
<button onclick="previous()">previous</button> 
<span id='result'></span> 
<button onclick="next()">next</button> 

サーバー側 - PHP test.phpを

if($_SERVER['REQUEST_METHOD'] == "POST"){ 
    //search ajax handler goes here 
    $keyword= $_POST['keyword'];//the search keyword 
    //apply the search you want here, (for example database query) 
    $searchResult = ["result1","result2","result3","result4","result5"]; 
    $searchResult = json_encode($searchResult); 
    die($searchResult); 
}