如何防止浏览器重试失败的 POST 请求（并检查互联网连接）？答案

【问题标题】：How to prevent browsers from retrying failed POST requests (and check for internet connectivity)?如何防止浏览器重试失败的 POST 请求（并检查互联网连接）？
【发布时间】：2015-06-05 15:35:44
【问题描述】：

我有一个面向移动用户的网站，它会检查每个 POST 请求的连接性。如果没有互联网连接，我会为用户提示一条错误消息。另外，我希望有一个过渡效果，表明正在提交表单。

我有以下代码：

var progress = 0;

$('div').on('submit', 'form', function (e) {
    var thisform = this;

    if (progress === 1) {

        // check internet connection     
        var connection = hostReachable();

        if (!connection) {
            alert('No connection');
            setTimeout(function () { // re-allow submission after 8000 ms (not immediately to avoid browser retry)
                progress = 0;
            }, 8000);
            return false;
        }

        return true;
    }

    e.preventDefault();
    e.stopPropagation();

    if (progress === 0) { // first submit

        // updated progress value            
        progress = 1;

        //form transition               
        $('.spinner').show('fast', function () {
            $('.pagecontent').fadeOut('fast');
            thisform.submit();
        });
    } else {
        // prevent submit retries when no connectivity
        return false;
    }
});

hostReachable() 是一个使用 xhr 请求检查连接性的函数。

现在的问题是thisform.submit(); 之后表单提交事件似乎没有再次触发。所以if (progress === 1)里面的代码永远不会运行。

我的代码有什么问题？谢谢！

【问题讨论】：

在过渡期间，您正在提交表单。我不确定您对代码的期望。

标签： javascript jquery forms post connectivity

【解决方案1】：

thisform.submit() 不会触发表单提交事件处理程序，因为如果您考虑这将是一个无限循环。您要做的就是以编程方式单击按钮以触发表单提交事件。

$('#submit-button').trigger('click');

演示：

var progress = 0;

$('div').on('submit', 'form', function (e) {
    var thisform = this;

    if (progress === 1) {

        // check internet connection     
        var connection = hostReachable();

        if (!connection) {
            alert('No connection');
            setTimeout(function () { // re-allow submission after 8000 ms (not immediately to avoid browser retry)
                progress = 0;
            }, 8000);
            return false;
        }

        return true;
    }

    e.preventDefault();
    e.stopPropagation();

    if (progress === 0) { // first submit

        // updated progress value            
        progress = 1;

        //form transition               
        $('.spinner').show('fast', function () {
            $('.pagecontent').fadeOut('fast');
            $('#submit-button').trigger('click');
        });

    } else {
        // prevent submit retries when no connectivity
        return false;
    }
});

function hostReachable() {}

.spinner {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
    <form>
        <div class="spinner">loading</div>
        <input type="submit" value="submit" id="submit-button"/>
    </form>
</div>

【讨论】：