javascript - .each 循环中的 jQuery/Javascript Ajax POST 大约有 20% 的时间创建 6 个重复的帖子

Question

背景: jQuery mobile phonegap 构建多页-ajaxload sisyphus 启用表单，带有 ajax POST 循环到 GUI 数据库。有 171 个部分帖子，加上 1 个不同表格的摘要帖子。 (此数据可能应该是后端处理逻辑的一篇文章，不幸的是我没有访问权限或时间在后端修复此问题)。大约 80% 的时间，此功能会发布 171 个预期部分(加上 1 个摘要帖子)。然而，在 20% 的情况下，总共 177 个帖子中有 6 个重复的帖子。我试过 async:false，但性能受到很大影响。

为什么大约有 20% 的时间有 6 个随机重复的帖子？修复此 ajax post 循环的最佳方法是什么，以便没有任何跳过的帖子或任何重复的帖子？

HTML 提交部分:

<form id="submit_section" encoding="multipart/form-data" encType="multipart/form-data">
    <br>
    <input type=hidden name=fform value=1>
    <input type="hidden" name="_fid_40" id="_fid_40" value="" />
    <input type="hidden" name="_fid_48" id="_fid_48" value="" />
    <input type="hidden" name="_fid_6" id="uniquetoktok" value="" />
    <input type="hidden" name="sentstatus" id="sentstatus" value="" />
    <input type="text" placeholder="ID" required name="_fid_8" id="thisId" />
    <input type="hidden" required name="_fid_7" required />
    <input type="text" placeholder="Your First & Last Name" required name="_fid_7" disabled="disabled"/>
    <ul id="suggestions" data-role="listview" data-inset="true"></ul>
    <input name="_fid_41" id="_fid_41" type="hidden" required>
    <div class="custom-select">
        <select name="_fid_41" type="text" required disabled="disabled">
        <option value=""></option>
        <option value="locationOne">locationOne</option>
        <option value="locationTwo">locationTwo</option>
        <option value="locationThree">locationThree</option>
        <option value="locationFour">locationFour</option>
        <option value="locationFive">locationFive</option>
        </select>
    </div>
    <div id="notyetsent">
        <a href="" class="senderbutton" data-theme="c" data-role="button">Submit Site Walk</a>
    </div>
    <div id="alreadysent">
        <span style="color:red;"><center>* This form has already been sent.</center></span><br>
        <a data-icon="plus" data-role="button" data-theme="b" href="#" class="photobutton" id="morephotos" rel="external">Add Photos</a>
    </div>
</form>

HTML 表单格式:

<form id="check-2" encoding="multipart/form-data" encType="multipart/form-data">
    <div class="sendsendsend">
        <h4 style="display:none;">C1:</h4>
        <input type="hidden" name="_fid_14_C1" />
        <textarea style="display:none;" name="_fid_15_C1" /></textarea>
    </div>
    <div class="sendsendsend">
        <h4 style="display:none;">C2:</h4>
        <input type="hidden" name="_fid_14_C2" />
        <textarea style="display:none;" name="_fid_15_C2" /></textarea>
    </div>
    <div class="sendsendsend">
        <h4 style="display:none;">C3:</h4>
    <input type="hidden" name="_fid_14_C3" />
    <textarea style="display:none;" name="_fid_15_C3" /></textarea>
    </div>
</form>   ...  168 more '.sendsendsends'  ...

jQuery Ajax 171 后循环:

var totalRequests = 0;
var totalSuccess = 0;
var totalError = 0;

// Serialize #submit_section data and set to var formData to inject in sendsendsend loop
var formData = $('#submit_section').find("input, select").serialize();

// Posts each .sendsendsend divs (171 in total)
$('.sendsendsend').each(function() {
    var taskOrderData = $(this).find("input, textarea").serialize();
    var h4String = $(this).children('h4').html();
    var colonPosition = h4String.indexOf(':');
    var taskOrderId = h4String.substr(0, colonPosition);
    var postData = taskOrderData + '&' + formData + '&_fid_25=' + taskOrderId;
        $.ajax({
            type: 'POST',
            url: 'url',
            data: postData
        }).done(function(data, textStatus, jqXHR) {
            totalSuccess++;
        }).fail(function(jqXHR, textStatus, errorThrown) {
            totalError++;
        }).always(function(a, textStatus, b) {
            totalRequests++;
            if (totalRequests >= 171) {
                if (totalError >= 1) {
                    $("#sentstatus").val("failed");
                    $.mobile.changePage('#failpop', {
                        transition: 'pop',
                        role: 'dialog'
                    })
                }
                if (totalSuccess >= 171) {
                    summaryPost();
                }
            }
        });
        function summaryPost() {
            $.ajax({
            type: 'POST',
            url: 'url',
            data: formData
        }).done(function(data, textStatus, jqXHR) {
            totalSuccess++;
        }).fail(function(jqXHR, textStatus, errorThrown) {
            totalError++;
        }).always(function(a, textStatus, b) {
            totalRequests++;
            if (totalRequests >= 172) {
                if (totalError >= 1) {
                    $('.senderbutton').show();
                    $("#sentstatus").val("failed");
                    $.mobile.changePage('#failpop', {
                        transition: 'pop',
                        role: 'dialog'
                    })
                };
                    if (totalSuccess >= 172) {
                    $("#sentstatus").val("yes");
                    $.mobile.changePage('#successpop', {
                    transition: 'pop',
                    role: 'dialog'
                    });
                };
            };
        });
    };
})

尝试在移动设备上重现此问题是一项挑战。任何意见或建议都会很棒!

编辑:忘记包含“Submit_Section”

Answer 1

包装您的 HTML 表单的显然不相关的代码可能会刺激这种行为。

特别是，如果您有空的 SRC 或 URL 值，这可能会导致多个页面请求。查看是否属于这种情况的一种快速方法是故意将具有这些错误设置值之一的元素添加到您的代码中，然后查看多个帖子的发生率是否增加。

这也可能是由于这些值在您的 CSS 定义中设置不当造成的。

这是某些浏览器的设计；有一个请求是您明确要求的，另一个请求是浏览器本身作为尝试解析这些空值的过程的一部分启动的。

一段时间前，我在经典的 ASP 应用程序堆栈中遇到了这个问题，它导致在请求/分页结果时出现奇怪的困惑行为。