使用jquery + ajax的進度條（最多30秒）

我有一個表單並將按鈕應用於用戶。用戶填寫表單數據後，用戶可以點擊應用按鈕，點擊應用按鈕，數據將被寫入一個文本文件使用shell腳本。使用jquery + ajax的進度條（最多30秒）

當服務器將數據寫入文本文件時，我需要顯示進度條。我的代碼

 $(function() { 
console.log("ready!"); 
callGetTxt(); 

$("#btnSubmit").click(function(){ 
    /*ajax call to add status*/ 
     var formData = $("form").serialize();    
     $.ajax({ 
     url: 'config_site', 
     type: 'POST', 
     data: formData, // An object with the key 'submit' and value 'true;    
     success: function (result) { 
      console.log(result);  
     }, 
     failure: function() { 
      alert("Ajax request failed!!!"); 
     },error: function() { 
      alert("Ajax request failed to update data!!!"); 
     } 
    }); 

});

請幫我

來源

2014-03-01 sree

請加法「beforeSend」，並寫在功能進度條代碼。 [jQuery的鏈接]（https://api.jquery.com/jQuery.ajax/） –

你能給我一個例子，我非常新jquery 在此先感謝。 – sree

如果你真的想顯示Ajax響應的真正的進步 - 這將是幾乎不可能完成，因爲AJAX沒有服務器的知識凡：你剛纔發一個請求並等待答案，你無法知道需要多長時間。所以，你可以做的最好的事情只是把一些waiting動畫，並根據請求完成刪除它。

$(function() { 
    console.log("ready!"); 
    callGetTxt(); 

    $("#btnSubmit").click(function(){ 
     /*ajax call to add status*/ 
     var formData = $("form").serialize();    
     $("#waiting").show(); // some waiting gif animation, lots of them on internets. 
     $.ajax({ 
      url: 'config_site', 
      type: 'POST', 
      data: formData, // An object with the key 'submit' and value 'true;    
      success: function (result) { 
       console.log(result);  
      }, 
      error: function() { 
       alert("Ajax request failed to update data!!!"); 
      }, 
      complete: function() { 
       $("#waiting").hide(); 
      } 
     }); 
    }); 
});

P.S. jQuery ajax沒有failure方法。

來源

2014-03-01 11:11:34 Eternal1

謝謝你們，它對兩種情況都很好。 – sree

$(function() { 
$('#overlay').hide(); 
console.log("ready!"); 
callGetTxt(); 

$("#btnSubmit").click(function(){ 
    /*ajax call to add status*/ 
     var formData = $("form").serialize();    
     $.ajax({ 
     url: 'config_site', 
     type: 'POST', 
     data: formData, // An object with the key 'submit' and value 'true;    
     success: function (result) { 
      console.log(result); 
      $('#overlay').hide(); 
     }, 
     beforeSend: function() { 
      $('#overlay').show(); 
     }, 
     error: function() { 
      alert("Ajax request failed to update data!!!"); 
     } 
    }); 

});

在$就添加HTML

<div id="overlay"></div>

新增CSS

#overlay{background-image: url('image url');background-color: rgba(255,255,255,0.5);background-position: center center;background-repeat: no-repeat; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF,endColorstr=#50FFFFFF);width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999;}

來源

2014-03-01 11:20:16

使用jquery + ajax的進度條（最多30秒）

回答

相關問題