2

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

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

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”

4

1 回答 1

0

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

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

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

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

不久前，我在经典的 ASP 应用程序堆栈中被这个问题所困扰，当请求/分页结果时，它会导致奇怪的混乱行为。

于 2014-04-14T00:23:35.103 回答