Несколько запросов Ajax Colliding

Question

Я строю интернет-магазин для проекта в университете. У меня есть панель поиска в заголовке, панель навигации слева. В обоих случаях я отправляю данные с помощью Ajax (из строки поиска - ключевое слово, из категории навигации и подкатегории). Ответ Ajax - это PHP-скрипт, который печатает продукты на основе категории и подкатегории или ключевого слова. В конце он печатает ссылки на страницы и выбирает элемент для количества товаров на страницу. Если я отправлю ключевое слово или нажму на навигатор, он будет распечатывать результаты в порядке, но если я затем изменил страницу или номер на элементе select (другой запрос Ajax), то результаты по умолчанию, потому что категория/подкатегория или ключевое слово больше не отправляются , Это код для запроса панели поиска:

$("#searchButton").click(function(){ 
    $("#searchBar").blur(); 
    var keyword=$("#searchBar").val(); 

    $.ajax({ 
    type:"GET", 
    url:"print.php", 
    data: { keyword:keyword } 
    }).done(function (data){ 
     $('#content').html(data); 
     return false; 
    }); 
}); 

и это код пагинации:

$(document).on("change", "#paginationSelect", function(){ 
    var productsPerPage=$("#paginationSelect").val(); 

    $.ajax({ 
    type:"GET", 
    url:"print.php", 
    data: { productsPerPage:productsPerPage } 
    }).done(function (data){ 
     $('#content').html(data); 
     return false; 
    }); 
}); 

мне интересно, что это лучший способ, чтобы сохранить данные, посланные последним запрос Ajax, так что Я могу отправить его снова, изменяя материал для разбивки на страницы. Должен ли я изменить PHP-файл или Ajax-запросы и как лучше всего это сделать?

Edit: Это PHP-файл:

<?php 

error_reporting(E_ALL^E_DEPRECATED); 

mysql_connect("localhost", "root", "") or die("Couldn't connect to database."); 
mysql_select_db("webshop") or die("Couldn't select a database."); 

mysql_query("SET NAMES 'utf8'"); 
mysql_query("SET CHARACTER SET utf8"); 

if(isset($_GET["category"]) & isset($_GET["subcategory"])){ 
    $category=$_GET["category"]; 
    $subcategory=$_GET["subcategory"]; 
    $query="SELECT * from proizvod where kategorija='".$category."' and podkategorija='".$subcategory."'"; 
} 
else if(isset($_GET["keyword"])){ 
    $keyword=$_GET["keyword"]; 
    $query="SELECT * from proizvod where ime like '%".$keyword."%'"; 
} 
else{ 
    $query="SELECT * from proizvod"; 
} 

$result=mysql_query($query); 

$numProducts=mysql_num_rows($result); 
if(isset($_GET["productsPerPage"]))$productsPerPage=$_GET["productsPerPage"]; 
else if($numProducts>=10) $productsPerPage=10; 
else $productsPerPage=$numProducts; 

if(isset($_GET["pageNum"]))$pageNum=$_GET["pageNum"]; 
else $pageNum=1; 
if(isset($keyword)) print "<div id=\"keywordMessage\" class=\"col-lg-12\">Traženi pojam: ".$keyword."</div>"; 
if(mysql_num_rows($result)==0) print "<div class=\"col-lg-12\">Nema rezultata</div>"; 
for($i=0;$i<($pageNum-1)*$productsPerPage;$i++){ 
    $row=mysql_fetch_array($result, MYSQL_ASSOC); 
} 
for($i=($pageNum-1)*$productsPerPage;$i<$pageNum*$productsPerPage;$i++){ 
     $row=mysql_fetch_array($result, MYSQL_ASSOC); 
     print("<div class=\"col-lg-6\"> 
        <table class=\"article\"> 
         <tr><td colspan=\"2\"><img src=\"images/".$row["id"].".jpg\" class=\"imgArticle\"/></td></tr> 
         <tr><td colspan=\"2\"><b>".$row['ime']."</b></td></tr> 
         <tr><td>Kategorija: </td><td>".$row['kategorija']."</td></tr> 
         <tr><td>Opis: </td><td>".$row['opis']."</td></tr> 
         <tr><td>Cijena: </td><td>".$row['cijena']." kn</td></tr> 
        </table> 
       </div>"); 
} 
print("<div class=\"col-lg-12\" id=\"paginationControl\"> 
     <span class=\"col-lg-4\"> 
     Prikazano: ".(($pageNum-1)*$productsPerPage+1)."-".$pageNum*$productsPerPage."/".$numProducts." 
     </span> 
     <span class=\"col-lg-4\" id=\"pageNumbers\">"); 
if($productsPerPage!=0){ 
    for($i=1;$i<=ceil($numProducts/$productsPerPage);$i++){ 
     if($i==$pageNum) print($i." &nbsp "); 
     else print("<a class=\"pageNumControl\" href=\"#\">".$i."</a>"); 
    } 
} 
print("</span> 
     <span class=\"col-lg-4\">Proizvoda po stranici: 
      <select id=\"paginationSelect\"> 
       <option value=\"10\" "); if($productsPerPage==10){ print("selected");} print(">10</option> 
       <option value=\"20\" "); if($productsPerPage==20){ print("selected");} print(">20</option> 
       <option value=\"30\" "); if($productsPerPage==30){ print("selected");} print(">30</option> 
       <option value=\"50\" "); if($productsPerPage==50){ print("selected");} print(">50</option> 
      </select> 
      </span> 
     </div>"); 
mysql_free_result($result); 

>

Answer 1

Вы можете использовать jQuery .Data(). Но обратите внимание:, если вы обновите всю страницу, информация .data() будет потеряна.

Итак, без дополнительного кода это лучший пример, который я мог бы придумать. Я сохраняю информацию поиска в данных # searchBar, а затем извлекаю ее при изменении паузы.

$("#searchButton").click(function() { 
    var $sb = $("#searchBar"), 
     keyword = $sb.val(); 

     $sb.data({ 
     prevKeyword: keyword 
     }).blur(); 

     $.ajax({ 
     type: "GET", 
     url: "print.php", 
     data: { 
      keyword: keyword 
     } 
     }).done(function(rtnData) { 
     $('#content').html(rtnData); 
     return false; 
     }); 
}); 

$(document).on("change", "#paginationSelect", function() { 
    var productsPerPage = $("#paginationSelect").val(), 
     previousKeyword = $("#searchBar").data('prevKeyword'); 

    // Do something with the keyword 
    console.log(previousKeyword); 

    $.ajax({ 
     type: "GET", 
     url: "print.php", 
     data: { 
      keyword: previousKeyword, 
      productsPerPage: productsPerPage 
     } 
    }).done(function(rtnData) { 
    $('#content').html(rtnData); 
     return false; 
    }); 
});