作为标题你看，我的网站遇到了一些问题，
我使用ajax读取我的API, ajax成功后，我需要重新加载页面来显示一些数据，
不幸的是，页面有时会闪烁然后重新加载，但有时不会。
我使用setTimeout来实现这个，因为我在写购物车页面，
允许用户编辑购物车中的商品。
我的想法是:在用户停止点击加减按钮或停止输入数量约1秒后，
ajax将执行读取我的API, ajax成功后，重新加载页面。
那么，有没有什么方法可以防止页面闪烁呢?
或者我可以制作一个加载gif来显示在页面上?
我的代码是这样的:
var timeout = null;
$('.num').on('keyup', function() {
var newNum = $(this).val();
var pid = $(this).attr("name");
clearTimeout(timeout);
timeout = setTimeout(function() {
if(newNum <= 0){
alert("At least 1 product!");
$(this).val("1");
$.ajax({
type: "post",
url: myAPI,
async: false,
data: {
pid: pid,
newNum: 1
},
dataType: "json",
success:function(data){
window.location.reload(true);
},
});
}else {
$.ajax({
type: "post",
url: myAPI,
async: false,
data: {
pid: pid,
newNum: newNum
},
dataType:"json",
success:function(data){
window.location.reload(true);
},
});
}
}, 1000)
});
你可以添加一个你想要的加载器gif，然后在文档加载时删除。
<div class="loader-fix" style="position:fixed;height:100vh;width:100vw;background:#ffffff;">
<img src="your.gif" />
</div>
<script>
$(window).on('load', function (e) {
$('.loader-fix').fadeOut('slow', function () {
$(this).remove();
});
});
</script>
当您想要重新加载页面以显示更新的数据时，使用ajax的意义是什么?
success:function(data){
window.location.reload(true);
}
上面这段代码有什么用?
对于你的目的一个简单的form submission的东西是足够的，但你已经使用ajax获得数据，但不使用它的任何地方。
如果您想重新加载页面，那么最好使用Şahin Ersever解决方案。
如果你想要一个动态的网站，在后台获取数据，在前端更新，而不刷新页面，这样做:
<html>
<body>
<h1> Dynamic load using AJAX </h1>
<div class="dynamic_div">
<div class="some_class">
<!-- here some more elements may/may not contain dynamic data or some server side based-->
<!-- Like this -->
<h1> Name:- <?php echo $name;?> </h1>
<p> <?php echo $some_other_variable;?> </p>
<p> <?php echo $some_other_variable;?> </p>
....
</div>
</div>
<button onclick="letsload()">Load</button>
<script>
function letsload(){
$.post("someurl",{ data1: "value1", data2 : "value2"},
function(data, status){
if(status == "success"){
$('.dynamic_div').html(data);//Loading updated data
}
});
}
</script>
</body>
</html>
在data变量上，您可以回显所需的html/json或成功/错误代码，并相应地处理ajax函数中的数据/代码。
编辑:-
看你的评论But I check my website, if ajax success, I use console.log to print my data, it's not working, but if reload page, it can work。
我有一个快速简单的解决方法。
让我们以上面我给出的例子为例。
假设我想要更新的数据在dynamic_div中显示，我要做的是，我保持元素在单独的文件中显示在div内。
如:updated.php
<div class="some_class">
<!-- here some more elements may/may not contain dynamic data or some server side based-->
<!-- Like this -->
<h1> Name:- <?php echo $name;?> </h1>
<p> <?php echo $some_other_variable;?> </p>
<p> <?php echo $some_other_variable;?> </p>
....
</div>
现在我所做的是在我的ajax成功，我将加载这个div到我的.dynamic_div像这样。
success:function(data){
$('.dynamic_div').load("updated.php");//Load the inside elements into div
}
现在你将得到更新的数据，因为你已经在后台的某个地方更新了它，所以load()将在一个部门内加载一个页面，而不刷新整个页面。
注释任何查询
- AJAX从web服务器读取数据-在网页加载后
- 在不重新加载网页的情况下更新网页
- 向后台web服务器发送数据
什么是Ajax
如果你想重载页面，那么不要使用ajax调用，但是如果你想使用ajax加载数据，那么在ajax成功消息中使用JavaScript更新你的html。