ajax 成功后刷新/重新加载页面但防止页面闪烁
[英]after ajax success refresh / reload page but prevent page blink
问题描述
as title you see, I meet some problem with my website,
如标题所示，我的网站遇到了一些问题，
I use ajax to read my API, and after ajax success, I need to reload page to display some data,我使用ajax读取我的API，ajax成功后，我需要重新加载页面来显示一些数据，
Unfortunately, the page sometime will blink and then reload, but sometime will not.不幸的是，页面有时会闪烁然后重新加载，但有时不会。
And I use setTimeout to achieve that, because I'm writing shopping cart page,我使用 setTimeout 来实现这一点，因为我正在编写购物车页面，
It allow user edit their shopping carts' goods.它允许用户编辑他们购物车的商品。
My idea is: after user stop click plus or minus button or stop typing quantity about 1 second,我的想法是：在用户停止单击加号或减号按钮或停止输入数量约 1 秒后，
ajax will execute to read my API, after ajax success, reload page. ajax会执行读取我的API，ajax成功后，重新加载页面。
So, is there have any ways to prevent page blink?那么，有什么办法可以防止页面闪烁呢？
Or maybe I can made a loading gif to display on the page?或者也许我可以制作一个正在加载的 gif 以显示在页面上？
My code will be like:我的代码将是这样的：
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)
});
3 个解决方案
解决方案1
0 2021-09-27 06:47:03
You can add a loader gif as you want then remove when document loaded.您可以根据需要添加加载器 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>
解决方案2
0 2021-09-27 10:16:48
What is the point in using ajax when you want to reload the page to show updated data...?当您想重新加载页面以显示更新的数据时，使用ajax有什么意义...？
success:function(data){
window.location.reload(true);
}
What is the use of above piece of code..?上面这段代码有什么用..？
For your purpose a simple form submission thing was enough, but you have used ajax getting data but not using it anywhere.对于您的目的，一个简单的form submission就足够了，但是您已经使用ajax获取数据但没有在任何地方使用它。
If you want to reload the page, then better go with solution by Şahin Ersever.如果您想重新加载页面，那么最好使用 Şahin Ersever 的解决方案 go。
If you want a dynamic site, where data is fetched from backend in background and updated on frontend without refreshing the page, do something like this.如果你想要一个动态站点，在后台从后端获取数据并在不刷新页面的情况下在前端更新数据，请执行以下操作。
<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>
On data variable, you can echo out desired html/json or a success/error code, and handle the data/code in ajax function accordingly.在data变量上，您可以回显所需的 html/json 或成功/错误代码，并相应地处理 ajax function 中的数据/代码。
Edit:-编辑：-
Looking at your comment 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 .查看您的评论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 。
I have a quick and easy solution for this.我有一个快速简单的解决方案。
Let's take above example, which I have given.让我们以我给出的上面的例子为例。
Suppose if I want updated data to be displayed in dynamic_div what I will do, is I keep the element to be shown inside that div in separate file.假设如果我想在dynamic_div中显示更新的数据，我会做的是将要显示在该 div 中的元素保存在单独的文件中。
eg:- updated.php例如：- 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>
Now What I do is on success of my ajax, I will load this div in to my .dynamic_div like this.现在我所做的是在我的 ajax 成功后，我将像这样将这个 div 加载到我的.dynamic_div中。
success:function(data){
$('.dynamic_div').load("updated.php");//Load the inside elements into div
}
Now you will get updated data, as you have already updated it somewhere in backend, so load() will load a page inside a division, without refreshing the whole page.现在你将获得更新的数据，因为你已经在后端的某个地方更新了它，所以load()将在一个分区内加载一个页面，而不刷新整个页面。
Comment down for any queries.对任何疑问发表评论。
解决方案3
-1 2021-09-27 06:56:20
- AJAX Read data from a web server - after a web page has loaded AJAX 从 web 服务器读取数据 - 在加载 web 页面后
- Update a web page without reloading the page在不重新加载页面的情况下更新 web 页面
- Send data to a web server in the background后台向web服务器发送数据
If you want to reload page then don't use ajax call, but if you want to load data using ajax then update your html using JavaScript in ajax success message.如果您想重新加载页面，则不要使用 ajax 调用，但如果您想使用 ajax 加载数据，则在 ajax 成功消息中使用 JavaScript 更新您的 html。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.