ajax 成功后刷新/重新加載頁面但防止頁面閃爍

Question

如標題所示，我的網站遇到了一些問題，

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

Answer 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>

Answer 2

當您想重新加載頁面以顯示更新的數據時，使用ajax有什么意義...？

success:function(data){
                    window.location.reload(true);                    
                }

上面這段代碼有什么用..？

對於您的目的，一個簡單的form submission就足夠了，但是您已經使用ajax獲取數據但沒有在任何地方使用它。

如果您想重新加載頁面，那么最好使用 Şahin Ersever 的解決方案 go。

如果你想要一個動態站點，在后台從后端獲取數據並在不刷新頁面的情況下在前端更新數據，請執行以下操作。

<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 function 中的數據/代碼。

編輯：-

查看您的評論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()將在一個分區內加載一個頁面，而不刷新整個頁面。

對任何疑問發表評論。

Answer 3

AJAX 從 web 服務器讀取數據 - 在加載 web 頁面后
在不重新加載頁面的情況下更新 web 頁面
后台向web服務器發送數據

什么是 Ajax

如果您想重新加載頁面，則不要使用 ajax 調用，但如果您想使用 ajax 加載數據，則在 ajax 成功消息中使用 JavaScript 更新您的 html。

ajax 成功后刷新/重新加載頁面但防止頁面閃爍

問題描述

3 個解決方案

解決方案1
0 2021-09-27 06:47:03

解決方案2
0 2021-09-27 10:16:48

解決方案3
-1 2021-09-27 06:56:20

ajax 成功后刷新/重新加載頁面但防止頁面閃爍

問題描述

3 個解決方案

解決方案1 0 2021-09-27 06:47:03

解決方案2 0 2021-09-27 10:16:48

解決方案3 -1 2021-09-27 06:56:20

解決方案1
0 2021-09-27 06:47:03

解決方案2
0 2021-09-27 10:16:48

解決方案3
-1 2021-09-27 06:56:20