jquery的ajax请求尚未完成,就会接着执行后面的代码吗?

当一个注册表单的提交按钮点击后,通过绑定的时间来确定用户名、邮箱等是否有效,最后来确定是否提交表单。先设置一个变量status值为true,然后通过ajax来判断用户名、邮箱等是否已经注册,如果已注册就在回调函数中设置status的值为false,最后再判断status的值是true还是false来决定是否提交。判断status的代码写在ajax的后面,但是还是先执行了判断status的代码,再执行了ajax回调函数中设置status的代码,不知道该怎么做?

window.cb = {};
cb.register={};
$('#register-submit').click(function(){
        var $self = $(this);
        var $form = $(this).closest('#register-form');
        var $username = $form.find('#register-username');
        var username = $username.val();
        cb.register.status = true;
        if(!username.match(/^[0-9a-z_\u4e00-\u9af5]{2,14}$/i))
        {
            $username.next('span').remove();
            $username.after('<span class="tips" style="color:red;margin-left:5px;">无效的用户名</span>');
            cb.register.status = false;
        }
        else
        {
            $username.next('span').remove();
            $.post('/auth/ajax',{username:username},function(data){
                if(data.status==false)
                {
                    $username.after('<span class="tips" style="color:red;margin-left:5px;">用户名已注册</span>');
                    cb.register.status = false;
                }
            },'json');
        }
        var $email = $form.find('#register-email');
        var email = $email.val();
        if(!email.match(/^[0-9a-z_\-]+@[0-9a-z_\-]+\.[a-z]{2,4}$/i))
        {
            $email.next('span').remove();
            $email.after('<span class="tips" style="color:red;margin-left:5px;">无效的邮箱</span>');
            cb.register.status = false;
        }
        else
        {
            $email.next('span').remove();
            $.post('/auth/ajax',{email:email},function(data){
                if(data.status==false)
                {
                    $email.after('<span class="tips" style="color:red;margin-left:5px;">邮箱已注册</span>');
                    cb.register.status = false;
                    console.log(cb.register.status);
                }
            },'json');
        }
        var $pwd = $form.find('#register-password');
        var pwd = $pwd.val();
        if(!pwd.match(/^[0-9a-z_\-#@$*%&]{6,16}$/i))
        {
            $pwd.next('span').remove();
            $pwd.after('<span class="tips" style="color:red;margin-left:5px;">无效的密码</span>');
            cb.register.status = false;
        }
        console.log('hello');
        console.log(cb.register.status);
        return false;
        if(cb.register.status==false){

            return false;
        }
        $.post('/auth/register',{email:email,name:username,password:pwd},function(data){
            if(data.status==true)
            {
                $self.css('display','none');
                var $message = $('#message');
                var s1 = '<span class="tips" style="color:green;font-weight:bold;margin: 0 5px;">注册成功</span>';
                var s2 = '一封邮件已发送到邮箱,请在1小时内验证(过期后需重新发送验证邮件)';
                $message.find('.message-body').append(s1+s1);
            }
            else
            {
                var $token = $form.find('#token');
                $token.attr('name',data.token.name);
                $token.attr('value',data.token.value);
                $form.find('.submit-tips').remove();
                $form.prepend('<div class="submit-tips tips" style="color:red;padding:5px 5px 5px 15px;">注册失败,请重新提交</div>');
            }
        },'json');
        return false;
    });
阅读 10.6k
5 个回答

1)ajax请求时异步的,也就是请求后,你必须在回调函数中得到请求的结果,执行后续的判断,
当然你可以设置成同步的:)
2)你的处理逻辑可以稍微修改下,把用户的输入信息验证一次性处理,而不是分段处理
3)最后的后台验证合并成一个请求,在这个请求中统一处理用户名/邮箱的问题
分段处理用户体验会更好

但是一定还是要记住 ajax请求是异步的

因为ajax是异步的,所以你后面的判断应该放在回调函数中(就是你判断返回值的地方),而不是放在外面!

还有建议你不要这么去做,单纯的ui字段验证(输入是否合法),先做,之后再去后端查是否被注册过。

查询是否被注册过最好能用1个请求来,你这样分成2个,嵌套起来太麻烦了。

如果你要阻塞ajax函数使其返回结果后再进行其他操作,那么请使用$.ajax来进行,该函数的settings中的async可以控制以异步/同步请求。

javascript$.ajax({
  url: '/auth/register',
  data: {email:email,name:username,password:pwd},
  async: false,  // true为异步,false为同步
  dataType: 'json',
  sunccess: function(data) {
    // TODO
  }
})

ajax默认是异步操作的,想要同步的话就将参数中的async设置成false

如楼上所说,要么你就将请求方式改为同步。要么,你就只能用setTimeout设置一个时间,作一下延时。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进