使用jQuery在處理腳本時顯示動畫加載消息

Question

我在做什麼：將表單提交到將在後臺運行的腳本中，並在輸入字段中提供帶有動畫點的加載文本，並返回一個消息曾經在同一領域完成。

問題：我設法捕捉輸入變量並顯示動畫加載消息。我對此有點新，所以嵌套代碼可能是一團糟，加載顯示可能應該是一個可以嵌套的函數（如果我正確理解這一點）。它停止顯示加載消息，所以我認爲表單實際上並沒有被提交，整個腳本只是在某處出現。

我有什麼：

<script> 
    jQuery(document).ready(function($) 
    { 
    $("#subsenid").submit(function(e) 
    { 
     e.preventDefault(); 
     var senid = $("input:text[name=submit_sen]").val(); 
     i = 0; 
     setInterval(function() 
     { 
     i = ++i % 4; 
     $("#submit_senid").val("Importing"+Array(i+1).join(".")); 
     }, 500, function() 
     { 
      $.get("/inc/receiving_script.php", {psnid: senid}, function(data) 
      { 
      $("#submit_senid").val("All done"); 
      }); 
     } 
     }); 
    }); 
    </script> 

長話短說：提交表單，顯示動畫加載信息，並從腳本返回消息（我只是說了「全部完成」的消息，而不是從正確的返回消息腳本來查看是否有任何事情發生）。

任何指針和建議在正確的方向非常感謝。

如果需要更多信息，我會盡快提供。

Answer 1

您是否在使用類似firebug或類似的東西？你應該。它是Firefox的一個插件，可以幫助您調試代碼。 （其他現代瀏覽器有類似的控制檯和工具，通常你可以通過右鍵點擊你的頁面並選擇'檢查元素'或類似的東西來訪問它們）

如果你打開螢火蟲，你將能夠看到你的腳本的ajax調用，結果如何。此外，它還允許您在代碼中設置執行中斷點（在提交處理程序的開始處設置一箇中斷點）並逐行瀏覽您的腳本。這樣你就可以看到實際發生了什麼，並檢查變量的內容等。同時DOM可以很容易地檢查。對任何前端開發人員提供寶貴的幫助！

其次，我在代碼中看到一些問題。你在匿名函數中執行ajax調用，並將其作爲第三參數提供給setInterval，這將不起作用。您需要啓動動畫，執行ajax調用，並在ajax回調停止動畫中將您檢索到的數據設置在您想要的位置。

未經檢驗的，但這樣的事情應該把你在正確的軌道上：

jQuery(document).ready(function($){ 

    $("#subsenid").submit(function(e){ 
     e.preventDefault(); 
     var senid = $("input:text[name=submit_sen]").val(); 
     var i = 0; 

     var animationInt = setInterval(animateBox, 500); 
     function animateBox(){ 
      i = ++i % 4; 
      $("#submit_senid").val("Importing"+Array(i+1).join(".")); 
     } 

     $.get("/inc/receiving_script.php", {psnid: senid}, function(data){ 
      clearInterval(animationInt); 
      $("#submit_senid").val("All done"); 
     }); 
    } 
    }); 
});