Question

我有一个针对移动用户的网站，它会检查每个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)中的代码永远不会运行。

我的代码出了什么问题？谢谢！

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

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

1 个答案: