javascript - 使用 jquery + ajax 的进度条(最多 30 秒)

Question

我有一个表单并向用户应用按钮。用户填写表单数据后，用户可以单击“应用”按钮，单击“应用”按钮后，数据将使用 shell 脚本写入一个文本文件。

我需要在服务器将数据写入文本文件时显示进度条。我的代码

     $(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!!!");
        }
    });  

}); 

请帮助我

Answer 1

$(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;}