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

Answer 2

如果你真的想要显示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方法。

使用jquery + ajax进度条（最多30秒）

2 个答案: