时间戳

首页 > 解决方案 > ajax 成功后刷新/重新加载页面但防止页面闪烁

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

问题描述

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

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

标签： javascriptphpjqueryajax

解决方案

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 的成功，我会.dynamic_div像这样加载这个 div。

success:function(data){
                    $('.dynamic_div').load("updated.php");//Load the inside elements into div                
                }

现在您将获得更新的数据，因为您已经在后端的某个地方对其进行了更新，因此load()将在一个部门内加载一个页面，而无需刷新整个页面。

评论任何查询。

推荐阅读