用Ajax和beforeSend顯示圖像

我對jquery和ajax相對陌生，我對可能性感到驚訝！用Ajax和beforeSend顯示圖像

我正在開發我的第一個ajax，jquery（帶驗證插件）webform。這幾乎完成了，但是我不明白的一件事。我想顯示一個加載圖標並使用beforeSend方法禁用發送按鈕。但它不起作用，並且chrome不顯示任何錯誤消息。

下面是代碼

$(document).ready(function(){ 
$("#Formular").validate({ 
    rules: { 
     name: "required", 
     email: { 
      required: true, 
      email: true 
     }, 
     yname: "required", 
     yemail: { 
      required: true, 
      email: true 
     } 
    }, 
    submitHandler: function(form) { 
     theUrl = 'send.php'; 
     var params = $(form).serialize(); 
     $.ajax ({ 
      type: "POST", 
      url: theUrl, 
      data: params, 
      beforeSend : function(){ 
       $('.loading_icon').show(); 
      },    
      processData: false, 
      async: false, 
      success: function(response) { 
       $('#response').hide(); 
       $('#response').html(response); 
       $('#response').fadeIn('slow'); 
       $('.loading_icon').hide(); 
      } 
     }); 
    } 
});

}）;

加載圖標不顯示。它在submitHandler之前工作，所以CSS是正確的，圖像也是。

這裏它確實沒有什麼部分：

   beforeSend : function(){ 
       $('.loading_icon').show(); 
      },

我搜索在這裏和文檔還在，但我沒有找到任何解決辦法。謝謝你的幫助！

來源

2012-08-22 Owl

有沒有可能讓我們得到小提琴演示你的問題，我們更容易玩弄。 – sQVe

爲什麼你使用'processData：false'。任何具體原因？ – diEcho

我是新來的ajax和jquery，所以我嘗試使用教程，這是複製代碼，所以實際上我不知道爲什麼我使用了processData ...抱歉...需要再次搜索tut，我讀了很多 – Owl

JQuery的文件說：

可用於修改jqXHR A-預先請求的回調函數（jQuery中1.4.x中，XMLHTTPRequest的）之前它對象被髮送。使用此來設置自定義標題等。jqXHR和設置映射作爲參數傳遞。這是一個Ajax事件。在beforeSend 函數中返回false將取消請求。在jQuery 1.5中，beforeSend 選項時將忽略這讓我覺得它不應該被用於像一個加載圖標的要求

類型的調用。你爲什麼不只是：

var params = $(form).serialize(); 
$('.loading_icon').show();  
$.ajax ({ 
      type: "POST", 
      url: theUrl, 
      data: params,    
      processData: false 
     }).done(function(response) { 
      $('#response').hide(); 
      $('#response').html(response); 
      $('#response').fadeIn('slow'); 
     }).always(function() { 
      $('.loading_icon').hide(); 
     });

編輯

我使用Firebug調試的代碼，做工精細。這只是你的帖子是如此之快，你永遠不會看到它。

編輯更新使用jqXHR對象成功等。刪除async:false，因爲這永遠不會使用...

來源

2012-08-22 08:49:27 Liam

謝謝，上傳的代碼位於就像你說的那樣，但它不會給我一個錯誤信息，也不會顯示出圖標......我記得我之前嘗試過這種方式（抱歉，不知道是否嘗試了很多不同的方式） – Owl

不確定，如果你提供一個小提琴我可能會幫助？ – Liam

謝謝！當然，這裏的鏈接（請刪除+因爲它目前沒有captcha）ht + tp：//+kids.yaqiin.net+/TEST/ – Owl

這是不正確的，它加載得太快，你看不到車輪。實際上，當您連續添加一個css更改和一個同步ajax請求時，更改將被延遲，直到請求在某些瀏覽器（例如Chrome）中完成。看看你的Ajax調用：

async: false,

問題時同步Ajax調用，同時調試，調試器本身允許每個方法停止，改變你到底看到前全面執行。因此，在任何一行代碼中設置斷點：

$('.loading_icon').show();  
$.ajax ({something});

它會顯示加載圖標。對此非常小心！因爲當你沒有設置任何斷點時，加載圖標不會顯示，直到結果發生（成功，錯誤）。

我發現在這種情況下正確工作的唯一方法是將ajax中的同步調用轉換爲異步調用。如果您擔心在過程中您會允許用戶觸摸不適當的東西，只需在整個頁面上添加一個div，並通過它禁用任何點擊事件。這樣做，你會發現加載圖標出現在整個Ajax請求期間，而不僅僅是在結束時。

來源

2014-05-29 12:01:55 Rittmann

用Ajax和beforeSend顯示圖像

回答

相關問題