Question

我有以下jQuery代码，这段代码的目的是创建一个短时间延迟，因此AJAX请求有时间正确执行：

$('#form_id').submit(function(e) {

    e.preventDefault();
    $submit_url = $(this).data('submitUrl');
    $submit_url = $submit_url.replace('http://','').replace(window.location.host,'');

    if ($(this).data('toBeAjaxSubmitted') == true) {
        $.ajax($submit_url, {
            type : $(this).attr('method'),
            data : $(this).serialize(),
            complete : function(data) {
                $(this).data('toBeAjaxSubmitted', false);
                $('#form_id').submit();
            }
        });
    }
});

会发生什么，表单从我需要提交的提交URL开始，以便组件将条目保存到数据库。但我还需要用户输入才能直接提交到付款网关URL，然后用户付款。

上面的代码创建了AJAX请求，但没有返回正常的回发行为（通过$('#form_id').submit()）。

它一直在反复提交表单，但从不发布到网关URL或重定向。

我做错了什么？

Answer 1

经过一些调试后，以下内容对我有用：

$('#chronoform_Online_Submission_Step8_Payment').submit(function(e) {
    var form = this;
    e.preventDefault();
    $submit_url = $(this).data('submitUrl');
    $submit_url = $submit_url.replace('http://','').replace(window.location.host,'');

    if ($(this).data('toBeAjaxSubmitted') == true) {
        $.ajax($submit_url, {
            type : $(this).attr('method'),
            data : $(this).serialize(),
            complete : function(data, status) {

            }
        }).done(function() {
            form.submit();
        });
    }
});

真正让我走错路的是，在Chrome的开发者工具中，我启用了以下选项'禁用缓存（当DevTools打开时），这导致了一些令人头疼的问题Safari，Firefox（有效）和Chrome没有。

Answer 2

采用这种方法的 fiddling 怎么样？

$('#form_id').submit(function(e) {

    // closures
    var $form = $(this);
    var fAjaxComplete = function(data) {
        // don't send the ajax again
        $form.data('toBeAjaxSubmitted', 'false');

        // maybe do some form manipulation with data...

        // re-trigger submit
        $form.trigger('submit');
    };
    var oAjaxObject = {
        type : $form.attr('method'),
        data : $form.serialize(),
        complete : fAjaxComplete
    };

    var sSubmitUrl = $form.data('submitUrl');
    // scrub url
    sSubmitUrl = sSubmitUrl.replace('http://','').replace(window.location.host,'');

    // if ajax needed
    if ($form.data('toBeAjaxSubmitted') != 'false') {
        // go get ajax
        $.ajax(sSubmitUrl, oAjaxObject);
        // don't submit, prevent native submit behavior, we are using ajax first!
        e.preventDefault();
        return false;
    }

    // if you got here, go ahead and submit
    return true;

});

延迟提交会导致多个连续提交

2 个答案: