Javascript 导航回上一页时Ajax调用不起作用
我有一个php页面,我正在加载一些div,并使用ajax调用滚动到底部 但当我点击任何一个div进入下一页,当我从导航页面返回时,我的ajax滚动将内容加载到windows底部的操作就不起作用了。 下面是我的代码Javascript 导航回上一页时Ajax调用不起作用,javascript,php,jquery,ajax,caching,Javascript,Php,Jquery,Ajax,Caching,我有一个php页面,我正在加载一些div,并使用ajax调用滚动到底部 但当我点击任何一个div进入下一页,当我从导航页面返回时,我的ajax滚动将内容加载到windows底部的操作就不起作用了。 下面是我的代码 <?php $mysqli = new mysqli('localhost', 'root', '', 'table1'); if(mysqli_connect_errno()) { echo "Connection Failed: " . mysql
<?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>
页面滚动后加载数据
$(文档).ready(函数(){
$(窗口)。滚动(函数(){
scrollMore();
});
函数scrollMore(){
if($(窗口).scrollTop()==($(文档).height()-$(窗口).height()){
var offset=$('[id^=“myData_']).length;//在这里我们可以找到第页上的总记录。
var记录=$(“.allData”).text();
$(窗口)。解除绑定(“滚动”);
如果(记录!=偏移量){
$(“#loaderImg”).html(“”);
$(“#loaderImg”).show();
加载数据(偏移量);
}
}
}
函数loadMoreData(偏移量){
$.ajax({
键入:“get”,
async:false,
url:'getMoreData.php',
数据:“偏移量=”+偏移量,
成功:功能(数据){
控制台日志(数据);
$(“#loaderImg”).empty();
$(“#loaderImg”).hide();
$(“.loadData:last”)。在(数据)之后;
},
错误:函数(数据){
警报(“发生ajax错误…”+数据);
}
}).done(函数(){
$(窗口).bind(“滚动”,函数(){
scrollMore();
});
});
}
});
找到的记录总数:
#
记录
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++; } ?>
nextpage.php
<html>
<head>
</head>
<body>
hi
</body>
</html>
你好
请查看代码并为我提供解决方案,将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();