导航回上一页时，Ajax 调用不起作用答案

【问题标题】：Ajax call not working when navigating back to previous page导航回上一页时，Ajax 调用不起作用
【发布时间】：2014-04-26 09:52:57
【问题描述】：

我在 php 中有一个页面，我在其中加载一些 div 并使用 ajax 调用滚动到底部但是，当我单击任何 div 以转到下一页时，当我从导航页面返回时，将内容加载到窗口底部的 ajax 滚动不起作用。下面是我的代码

<?php
    $mysqli = new mysqli('localhost', 'root', '', 'table1');

   if(mysqli_connect_errno()) {
      echo "Connection Failed: " . mysqli_connect_errno();
      }
?>
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Load data after page scroll </title>
<script type='text/javascript' src='js/jquery-1.7.2.min.js'></script>
<link rel="stylesheet" href="css/style.css" type="text/css" />

<script type="text/javascript" language="javascript"> 

$(document).ready(function(){

$(window).scroll(function(){
    scrollMore();
});

function scrollMore(){
    if($(window).scrollTop() == ($(document).height() - $(window).height())){

    var offset = $('[id^="myData_"]').length; // here we find out total records on page.
    var records = $(".allData").text();

    $(window).unbind("scroll");
        if(records != offset){
            $("#loaderImg").html('<img src="images/ajax-loader.gif" />');
            $("#loaderImg").show();
            loadMoreData(offset);
        }
    }
}

function loadMoreData(offset){
    $.ajax({
        type: 'get',
        async:false,
        url: 'getMoreData.php',
        data: 'offset='+offset,
        success: function(data){
        console.log(data);
            $("#loaderImg").empty();
            $("#loaderImg").hide();
            $(".loadData :last").after(data);
        },
        error: function(data){
            alert("ajax error occured…"+data);
        }
    }).done(function(){
        $(window).bind("scroll",function(){
        scrollMore();   
    });
    });
}


});
</script>
</head>
<body>
<?php
    $sql ="select * from xml";
    $countsql3 = mysqli_query($mysqli, $sql) or die("Cannot Get Pname Info: (".mysql_error().")");
    $numrows = mysqli_num_rows($countsql3);

    $limit = 20;
    $offset = 0;
    $mysql = "select * from xml limit ".$offset.", ".$limit."";
    $countsql3 = mysqli_query($mysqli, $mysql) or die("Cannot Get Pname Info: (".mysql_error().")");


?>

<div class="totalData">Total Records Found:<span class="allData"><?php echo $numrows;?></span></div>

<div class="mainDiv">
<div class="tableRow">
<div class="firstColumn"><strong>#</strong></div>
<div class="secondColumn"><strong>Record</strong></div>
</div>
<?php
$i = 1;
while($result = mysqli_fetch_array($countsql3)){ ?>
<div class="tableRow loadData" id="myData_<?php echo $i;?>">
<div class="firstColumn"><a href="nextpage.php"><?php echo $result['PID']; ?></a></div>
<div class="secondColumn"><?php echo $result['PID']?></div>
</div>
<?php $i++; }?>
<div class="tableRow">
<div class="secondColumn" id="loaderImg" style="display:none;"></div>
</div>
</div>



</body>
</html>

getMoreData.php

<?php
$mysqli = new mysqli('localhost', 'root', '', 'table1');

   if(mysqli_connect_errno()) {
      echo "Connection Failed: " . mysqli_connect_errno();
      }

$offset = (isset($_REQUEST['offset']) && $_REQUEST['offset']!='') ? $_REQUEST['offset'] : '';
$limit = 10;
$qry1 ="select * from xml limit ".$offset.", ".$limit."";
$countsql3 = mysqli_query($mysqli, $qry1) or die("Cannot Get Pname Info: (".mysql_error().")");
$i = ++$offset;
while($result = mysqli_fetch_array($countsql3)){ ?>
<div class="tableRow loadData" id="myData_<?php echo $i;?>">
<div class="firstColumn"><a href="nextpage.php"><?php echo $result['PID']; ?></a></div>
<div class="secondColumn"><?php echo $result['PID']?></div>
</div>
<?php $i++; } ?>

下一页.php

<html>
<head>
</head>
<body>
hi 
</body>
</html>

请查看代码并指导我解决问题

【问题讨论】：

标签： javascript php jquery ajax caching

【解决方案1】：

在您的 Ajax 调用将缓存设置为 false 时，可能是浏览器正在缓存调用，因为它是相同的，而不是实际使用它。禁用 ajax 缓存将强制它每次发送一个新请求。

function loadMoreData(offset){
$.ajax({
    type: 'get',
    async:false,
    url: 'getMoreData.php',
    cache: false,
    data: 'offset='+offset,
    success: function(data){
    console.log(data);
        $("#loaderImg").empty();
        $("#loaderImg").hide();
        $(".loadData :last").after(data);
    },
    error: function(data){
        alert("ajax error occured…"+data);
    }
}).done(function(){
    $(window).bind("scroll",function(){
    scrollMore();   
});
});

另一种方法是在 ajax 函数中添加一个变量，强制该方法获取当前日期，因此：

function loadMoreData(offset){

var dateNow = new Date().getTime() + Math.random();

$.ajax({
    type: 'get',
    async:false,
    url: 'getMoreData.php',
    cache: false,
    data: {offset: offset, time: dateNow }, 
    success: function(data){
    console.log(data);
        $("#loaderImg").empty();
        $("#loaderImg").hide();
        $(".loadData :last").after(data);
    },
    error: function(data){
        alert("ajax error occured…"+data);
    }
}).done(function(){
    $(window).bind("scroll",function(){
    scrollMore();   
});
});

【讨论】：

没有完全工作先生，有时它工作，有时不。可以在这个@Armlock29上做什么
查看编辑以获取有关缓存的另一个修复，基本上你强制它获取当前时间并发送它，因为数据总是会主动更改。
好吧，我可以解决的最后一件事是添加：var dateNow = new Date().getTime() + Math.random();