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

Question

我真的很難理解如何在jquery commit（）中執行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

您可以在事件處理程序功能范圍之外使用哨兵標志。 然后，在將標志設置為允許提交后觸發提交（為清晰起見，我修剪了所有代碼）：

簡化版：

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