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

jQuery/Javascript Ajax POST within .each loop creates 6 duplicate posts about 20% of the time

本文关键字:的时 大约 POST Ajax Javascript each 创建 循环 jQuery      更新时间:2023-09-26

背景:jQuery mobile phonegap 构建多页-ajaxload sisyphus enabled form with a ajax POST 循环到 GUI 数据库。有171个科员额,外加1个汇总员额到另一个表格。(这些数据可能应该是后端处理逻辑的帖子,不幸的是我没有访问权限或时间在后端解决此问题)。大约 80% 的时间,此功能会发布 171 个预期部分(加上 1 个摘要帖子)。但是,在20%的情况下,有6个重复的帖子,总共177个帖子。我尝试过 async:false,但性能受到了重大影响。

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

提交部分:

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

网页表单格式:

<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 Post Loop:

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"

显然,

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

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

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

这是某些浏览器的设计使然;您明确要求一个请求,而另一个请求是浏览器本身作为尝试解决这些空值的过程的一部分启动的。

不久前,我在经典的ASP应用程序堆栈中被这个咬了一口,在请求/分页结果时,它会导致奇怪的混乱行为。