ajax 成功后刷新/重新加载页面但防止页面闪烁答案

【问题标题】：after ajax success refresh / reload page but prevent page blinkajax 成功后刷新/重新加载页面但防止页面闪烁
【发布时间】：2021-11-19 08:06:39
【问题描述】：

如标题所示，我的网站遇到了一些问题，

我使用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)
});

【问题讨论】：

为什么不为加载数据创建一个函数而不是重新加载整个页面，然后在成功的 ajax 上使用该函数？
@SimoneRossaini 如果 ajax 成功，我会重新加载整个页面
“我需要重新加载页面以显示一些数据，” - 你应该做的是在你的 Ajax 响应中获取数据，然后使用更新页面上的内容JS。使用 Ajax 的全部意义在于避免页面刷新（这将导致闪烁/闪烁）。
确实，页面闪烁是重新加载的结果，通常是因为 HTML 非常复杂或有问题。正常的方法是使用 AJAX 调用，检索页面上的更改，然后仅更新。
X/Y 问题....

标签： javascript php jquery ajax

【解决方案1】：

您可以根据需要添加加载器 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】：

当您想重新加载页面以显示更新的数据时，使用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 成功数据，我正在尝试。
@ChaCha 很难回答，因为我们没有关于数据结构的信息，因为你可以echo out html/json/strings/codes 到 ajax 调用。如果你告诉我数据是怎样的，即：console.log(data); 的输出，它会很容易提供帮助。
我已经解决了这个问题，感谢您的帮助！

【解决方案3】：

AJAX 从 Web 服务器读取数据 - 在网页加载后
更新网页而不重新加载页面
在后台向 Web 服务器发送数据

What is Ajax

如果您想重新加载页面，请不要使用 ajax 调用，但如果您想使用 ajax 加载数据，请在 ajax 成功消息中使用 JavaScript 更新您的 html。

【讨论】：