为什么这个异步调用在返回false时没有停止

时间:2011-08-11 03:11:24

标签: javascript jquery asynchronous

  

可能重复:
  jquery ajax call taking too long or something

由于某种原因这个ajax调用

        $('#new_user').submit(function(e){
            $.ajax({
                type: 'post',
                url: "/validate_paypal",            
                dataType: 'json',
                async: false,
          data: {email : $('#user_paypal_email').val()},
              success: function( data ) {
                if (data.response["valid"] == false){
                        $('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
                        $('.error_messages').remove();
                        $('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
                        return false;
               }
                }
        });

});

即使在打印出我的错误并且我的返回错误之后仍在提交表单....为什么会这样

1 个答案:

答案 0 :(得分:2)

$.ajax是一个函数调用,它定义了一个AJAX回调,然后.submit函数结束。单独(异步)进行AJAX调用,然后你的成功函数返回false,基本上没有任何事情,因为.submit已经完成。

你真正想做的是暂停表单提交过程,等待AJAX​​调用完成,然后决定是否应该继续。这可以通过第一次完全停止表单提交,然后在获得AJAX回调后手动重新提交它来实现。当然诀窍是你怎么知道它是有效的?您可以在submit元素上抛出一个值。

示例:

$('#new_user').submit(function(e){
    var submitElem = $(this);

    // Check for previous success
    if (submitElem.data('valid') !== true) {
        $.ajax({
            type: 'post',
            url: "/validate_paypal",            
            dataType: 'json',
            async: false,
            data: {email : $('#user_paypal_email').val()},
            success: function( data ) {
                if (data.response["valid"] == false) {
                    $('#user_paypal_email').closest('.field').addClass('fieldWithErrors');
                    $('.error_messages').remove();
                    $('<span class="error_messages" style="color:#E77776;margin-left: 10px;">This is not a valid paypal email address</span>').insertAfter('#user_paypal_email');
                    return false;
                } else {
                    // If successful, record validity and submit (allowing to continue)
                    submitElem
                        .data('valid', true)
                        .submit();
                }
            }
        });    
        return false;
    } else {
        // Fall through
        return true;
    }
});