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请求以及最好的方法吗？

编辑：这是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);

＆GT;

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

多个Ajax请求冲突

1 个答案: