Javascript submit（函数（事件）{}）和JQuery.Ajax

我很难理解如何在jquery submit（）中调用jquery ajax，如果服务器在ajax调用中返回了true，则提交表单，或如果出现错误或返回的数据包含错误代码，则停止提交表单，而不同步ajax调用。

困扰我的是我应该在哪里

返回true

提交表格，我应该在哪里

返回false

停止提交表单

这是我一直尝试到现在，一切都是工作，除了形式是没有提交

请继续读下去

---

您可以在事件处理程序函数的范围之外使用sentinel标志。然后，在设置允许提交的标志后触发提交（为了清晰起见，我删除了所有代码）：

简化精简版： 上一个示例：

---

您不能从异步函数返回这样的值……对于初学者来说，您永远不能从回调函数内部返回值到外部函数。如果逐行跟踪代码，您将看到函数早在Ajax回调触发之前就退出了。“您正在订购比萨饼，然后试图在比萨饼交付之前吃掉它！”我建议停止默认提交，然后在必要时以编程方式提交表单。@showdev:请确保这不会导致无限循环。@dinmyte:我不建议这样做。这可能会锁定浏览器，直到调用完成。我认为$（“#sign_'）.submit（）将意味着无限循环：（@StudentX:你不正确…检查sentinel标志值-它只允许使用真值提交一次，而不会在该调用中再次点击Ajax:）@TrueBlueAussie:submit方法只会被调用一次！sentinel只会执行ajax请求，但在收到请求的响应之前会返回false。@Dinmyte:没关系。表单提交后，事件接管并运行AJAX调用。当AJAX调用完成时，它将重新触发事件并让浏览器完成它的工作。在您的示例中，这似乎是必需的。它要么成功（然后检查结果），要么失败并出现错误而不提交。我从新的例子中取出来。

$( '#sign_up' ).submit( function ( event ) {

    if ( $ ( '#somthing' ).val (  ) ) { return true; }

    var scriptUrl = $ ( '#upload_url' ).val (  );
    var data = new FormData (  );

    data.append ( 'otherstuff', 'something' ); 

    $returnvalue = false;

    $.ajax ( {
        method : 'POST', url : scriptUrl, data : data, cache : false, processData: false, contentType: false, dataType : 'json',
        success : function ( data, textStatus, jqXHR ) 
        { 
            // the data.error is not defined so the backend was successful
            if ( typeof data.error === 'undefined' )
            { 
                $returnvalue = true; 
            }
            // something was wrong at the backend
            else 
            {
                ( "#ajax_error" ).html ( data.message );
                $( '#upload' ).html ( 'upload File' );       
                $returnvalue = false;
            }

        },
        /*
         * Error conecting to the php file, Ajax function failed
         * This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request)
         */
        error : function ( jqXHR, textStatus, errorThrown ) 
        {
            $returnvalue = false;

        },
        complete : function ( jqXHR,  textStatus )
        {
            if ( textStatus.localeCompare ( 'success' ) === 0 )
            {
                return true;// this should submit the form but it isn't
            }

        }
    } );

    return $returnvalue;

});

var sentinel = false;
$('#sign_up').submit(function (event) {
    // only do the ajax call if a real submit is not in progress
    if (!sentinel) {
        $.ajax({
            success: function (data, textStatus, jqXHR) {
                // Allow the next submit through
                sentinel = true;
                // generate a submit event (recursive, but only once)
                $('#sign_up').submit()
            },
            error: function (jqXHR, textStatus, errorThrown) {
            }
        });
    }
    // return false - cancels original submits until allowed
    // returns true - allows a triggered submit
    return sentinel;
});

var sentinel = false;
$('#sign_up').submit(function (event) {
    if (!sentinel) {
        $.ajax({
            success: function (data, textStatus, jqXHR) {
                // the data.error is not defined so the backend was successful
                if (typeof data.error === 'undefined') {
                    sentinel = true;
                    $('#sign_up').submit()
                }
                // something was wrong at the backend
                else {
                    ("#ajax_error").html(data.message);
                    $('#upload').html('upload File');
                }

            },
            /*
             * Error conecting to the php file, Ajax function failed
             * This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request)
             */
            error: function (jqXHR, textStatus, errorThrown) {},

            // NOTE: This complete code does not appear to be needed
            complete: function (jqXHR, textStatus) {
                if (textStatus.localeCompare('success') === 0) {
                    sentinel = true;
                    $('#sign_up').submit()
                }

            }
        });
    }
    return sentinel;
});