CoderLim
2017-02-27 10:30
采纳率: 50%
浏览 2.3k

使用jquery ajax判断用户名是否存在后,如果做表单提交?

各位大神好,我还没有学query,但在做练习的时候,需要判断用户名是否存在,于是尝试使用了下$.get()方法来获取action返回值。

用以下代码,我能正确获取到action的返回值。在使用返回值做判断也都是正常的,**但是在表单提交的时候**,无法正常的return,执行if的顺序也很奇怪

代码:

//检查用户名:不能为空,且不能重复
function checkUsername() {
    var username = document.getElementById("username").value;
    var username_message = document.getElementById("username_message");
    username_message.style.fontSize = "12px";

    //只需要判断是否为空,输入了内容会进行用户名存在的校验
    if (username == "" || username.length == 0) {
        username_message.style.color = "red";
        username_message.innerHTML = "请输入用户名";
        return false;
    }

    //如果用户输入了内容,那么使用ajax验证用户名是否已存在
    else{
        var actionMessage;
        // ajax获取到action的查询结果
        $.get("user_checkUsername.action?"+new Date().getTime(),{'username':username}, function(data){
            alert("in ajax data is: "+data);
            actionMessage = data;
            alert("in ajax actionMessage is: "+actionMessage);
            //本来是在这里面完成判断的,发现有问题后提取出去,问题还是在
        });

        if(actionMessage=="exist"){
            alert("if exist, actionMessage is: "+actionMessage);
            username_message.style.color = "red";
            username_message.innerHTML = "用户名已存在";

            return false;
        }
        else if(actionMessage=="ok") {
            alert("if ok, actionMessage is: "+actionMessage);
            username_message.style.color = "green";
            username_message.innerHTML = "用户名可以使用";

            return true;
        }
        else{
            alert("if neither, actionMessage is: "+ actionMessage);
            return false;
        }
    }
}

onblur失焦时会调用一次这个方法,然后提交表单时,也会调用一次。

问题:data的值是没问题的,不管失焦还是提交表单,alert的弹出顺序都是:

if neither, actionMessage is: undefined
in ajax data is: exist
in ajax actionMessage is: exist

然后就结束了。

请问为什么会出现这种现象?if else的顺序难道不是应该从上到下吗?况且执行完了第一个alert,alert("if neither, actionMessage is: "+ actionMessage);后的return貌似没有执行?

在线跪求答案。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • 已采纳

    ajax是异步的,就是请求的url还没返回内容就已经执行了下面的 if(actionMessage=="exist"){的代码了,由于默认undefined,所以顺序就是你贴出来的了,

    用$.ajax配置async为false改为同步请求就行了

             $.ajax({url:"user_checkUsername.action?"+new Date().getTime(),data:{'username':username}, success:function(data){
                alert("in ajax data is: "+data);
                actionMessage = data;
                alert("in ajax actionMessage is: "+actionMessage);
                //本来是在这里面完成判断的,发现有问题后提取出去,问题还是在
            },
                    async:false//////////////////////////////
                    });
    
    点赞 评论

相关推荐 更多相似问题