JQuery.submit（function（event）{}）和JQuery.Ajax

Question

我很难理解如何在jquery submit（）中执行jquery ajax调用，如果某些条件在ajax调用中从服务器返回true，则提交表单，或如果有的话错误或返回的数据包含错误代码然后停止提交表单，而不会使ajax调用同步。

令我感到不安的是，我应该在哪里return true;提交表单，以及return false;我应该在哪里停止提交表单。

这是我到目前为止所尝试的，除了表格没有提交外，一切正常。

请阅读

$( '#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;

});

Answer 1

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

简化的缩减版本：

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;
});