显示发送多封电子邮件的 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();
                });
            });
          });

我只在脚本启动时看到加载图像，只有在全部完成后才能看到结果。当我发送 1.000 封电子邮件时，我看不到工作的进度，谁能帮我用最好的方式来查看发送的进度？

Answer 1

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

在你的 html 中添加一个 div 进度

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