显示Jquery ajax调用发送多个电子邮件的进度

Question

我使用ajax向所有客户端发送一封电子邮件（圣诞节前的示例）。 这里的AJAX脚本

  $(function() { 
       $("#mktg_submit").on("click",function(event) { 
       event.preventDefault(); 
       console.log($("#mktg").serialize()); 
       $("#mktg_esito").empty(); 
       $("#mktg_esito").append("<img src='images/loading.gif' alt=loading title=loading />"); 
       $.ajax({ 
        type  : 'POST', 
        url   : 'json/mktg.php', 
        data  : $("#mktg").serialize(), 
        dataType : 'json', 
        encode  : true 
       }) 
       .done(function(data) { 
        $("#mktg_esito").empty(); 
        console.log(data); 
        if ((data)["success"]===false) { 
         $("#mktg_esito").append("<div class='alert alert-danger'>"+(data)["errors"]+"</div>"); 
        } else { 
         $("#mktg_esito").append("<div class='alert alert-success' id='mktg_mess'><strong>Ben fatto!</strong> Email inviate correttamente.</div>"); 
         $.each((data)["email"], function(i, val) { 
          $("#mktg_esito").append("<p>Email inviata a: <b>"+val+"</b></p>"); 
         }); 
        } 
        $("#mktg_mess").show().delay(1000).fadeOut(); 
       }); 
      }); 
      }); 

蒙山这个我只看到加载图像时，脚本启动，我看到的结果，只有当所有完成。当我发送1000封电子邮件时，我看不到工作进展，任何人都可以帮助我使用最佳方式查看发送进度？

Answer 1

使用xhr对象并将事件侦听器附加到progress事件。 See the reference

添加一个div进步到HTML

<div class="progress"></div> 
<style> 
    .progress { 
     width: 0; 
     height: 4px; 
     background: black; 
     transition: width .3s linear; 
    } 
</style> 

然后用这样的改变你的Ajax请求：

$.ajax({ 
    xhr: function() { 
     var xhr = new window.XMLHttpRequest(); 
     xhr.upload.addEventListener("progress", function (evt) { 
      if (evt.lengthComputable) { 
       var percentComplete = evt.loaded/evt.total; 
       console.log(percentComplete); 
       $('.progress').css({ 
        width: percentComplete * 100 + '%' 
       }); 
       if (percentComplete === 1) { 
        $('.progress').fadeOut(); 
       } 
      } 
     }, false); 
     xhr.addEventListener("progress", function (evt) { 
      if (evt.lengthComputable) { 
       var percentComplete = evt.loaded/evt.total; 
       console.log(percentComplete); 
       $('.progress').css({ 
        width: percentComplete * 100 + '%' 
       }); 
      } 
     }, false); 
     return xhr; 
    }, 
    type: 'POST', 
    url: "your-url", 
    data: data, 
    success: function (data) {} 
});