Question

我在php中有我的主页，其中包含品牌名称和商店列表的复选框。最后一个提交按钮如下所示

<html>
<head>
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    function get_check_value() {
        var c_value = [];

        $('input[name="brand"]:checked').each(function () {
            c_value.push(this.value);
        });
        return c_value.join(',');

    }
    function get_store_value(){
    var d_value=[];
        $('input[name="store"]:checked').each(function () {
            d_value.push(this.value);
        });
        return d_value.join(',');
        }

    $(document).ready(function(){
   $('#btnSubmit').on('click', function (e)
   {e.preventDefault();
    alert("hi");
        //var os = $('#originState').val();
       //var c = $('#commodity').val();
        //var ds = $('#destState').val();
        var ser = get_check_value();
        var store=get_store_value();
        //var queryString = "os=" + os;
        var data = "?ser=" + ser;
        var queryString = "&ser=" + ser;
        alert(ser);
       $.ajax({
       //alert("ajax");
        type: "POST",
        url: "sortingajax.php",
        data: {ser:ser,store:store},
        dataType :  'html',
        success: function (b) {
           // alert(a+' ok. '+b)
            $('#results').html(b);
            console.log(b);
        }
    });

  });
 });

</script>


brand
    <input type="checkbox" name="brand" value="Sunbaby" />Sunbaby
    <br/>
    <input type="checkbox" name="brand" value="Advance Baby" />Advance Baby
    <br/>
    store
    <br/>
    <input type="checkbox" name="store" value="JCPenny" />JCPenny
    <br/>
    <input type="checkbox" name="store" value="Supermart" />Suoermart
    <br/>
    <input type="checkbox" name="store" value="Target" />Target
    <br/>


<button id="btnSubmit">sort</button>
<div id="results">
</div>
</body>
</html>

点击提交，按钮进入ajax调用并在结果div中显示结果。

<?php

include('connection.php');
$query=$_POST['ser'];
$query1=$_POST['store'];
echo $query;
echo $query1;

$query=explode(",",$query);
$query = array_filter($query);
$query1=explode(",",$query1);
$query1 = array_filter($query1);
$result=count($query);
$result1=count($query1);
//echo $result;
echo $result1;
$parts = array();
$limit = 10;
    $offset = 0;
if(!empty($query))
{
foreach( $query as $queryword ){
    $parts[] = '`BRAND` LIKE "%'.$queryword.'%"';

}
$brandsql='SELECT * FROM XML WHERE  ('.implode ('OR',$parts).')  order by price asc';
    $brandsql1=mysql_query($brandsql);
$numrows = mysql_num_rows($brandsql1);  
$countArray=array();
print($brandsql);
echo "<br />";
while($row = mysql_fetch_array($brandsql1)) {
    // Append to the array


    $countArray[] = $row;



    //echo $row['PID']."<BR />";
}
}
$parts1=array();
if(!empty($query1)){
foreach( $query1 as $queryword1 ){
    $parts1[] = '`STORE` LIKE "%'.$queryword1.'%"';

}
$storesql='SELECT * FROM XML WHERE  ('.implode ('OR',$parts1).') order by price desc';
    $storesql1=mysql_query($storesql);
$numrows1 = mysql_num_rows($storesql1); 
$countArray=array();
print($storesql);
while($row = mysql_fetch_array($storesql1)) {
    // Append to the array


    $countArray[] = $row;



    //echo $row['PID']."<BR />";
}
}
?>


<?php
foreach($countArray as $array)
{



?>

<div>
hi</div>

<?php $i++; } ?>

但是iF我刷新了我的页面或者从键盘按F5，在获得结果div中的内容之后，它返回到之前的内容，即带有复选框和提交按钮的第一页。请告诉我在代码中哪些地方出错或者我需要包含哪些内容以便在ajax调用之后如果刷新页面，内容应该保持不变，不应该转到以前的内容...

Answer 1

在显示内容后，使用setTimeout()在AJAX回调中的X秒后在页面上运行刷新。

Answer 2

您可以使用PHP脚本中的_SESSION变量来存储最近选中的复选框，并相应地在结果div上显示结果。

虽然，如果用户点击刷新，他可能想要重置他所做的选择。你可以给他一个警告，如果他刷新，他的改变就会丢失。

window.onbeforeunload = function() {
    return confirm("You have made changes to this form. Do you want to continue without saving these changes?");   
}

页面重新加载后，Ajax调用无法正常工作。

2 个答案: