javascript - JQuery.submit(function(event){}) 和 JQuery.Ajax

Question

我真的很难理解如何在 jquery Submit() 中进行 jquery ajax 调用，并在 ajax 调用中从服务器返回 true 的某些条件时提交表单，或(如果有)错误或返回的数据包含错误代码，然后停止提交表单，不使 ajax 调用同步。

令我困扰的是我应该在哪里返回 true; 来提交表单，以及我应该在哪里返回 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;
});