初学者使用json+ajax作注册判断的时候容易犯的一个错误

平常越不留意的东西越容易犯错,前些天在做注册案例的时候,用到了json+ajax来发送异步请求来判断当前的用户有没有被注册过,然后在注册按钮进行终极校验决定是否进行注册的时候,遇到了一个bug困扰了很久,后来经过自己的不断的调试和百度解决了,在此我将遇到的问题使用伪代码跟大家分享一下,让大家遇到我这个坑的时候轻松越过.

 

(以下是错误案例)

    1 我在注册页面中register.html中用户输入框失去焦点的时候发送异步请求,判断当前用户有没有被注册过,结果返回显示在页面提示用户.异步请求的函数如下所示:

function checkUsername() {
$.post("user","action=checkusername&username="+$("#username").val(),function (result) {
var flag = result.data;
if(!flag){
//用户名已经被重复注册了
$("#errors").html("该用户名不可用")
    return false;
}else{
$("#errors").html("");
    return true;
}
} ,"json");
}

　　2 我在注册按钮上绑定点击事件,再次验证用户名是否可用,根据判断决定是否进行注册

function register() {
if(checkUsername()){   //再次发送异步请求
$.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {
var flag = result.data;
if(flag){
location.href = "login.html";
}else {
alert("注册失败");
}
},"json");
}else {
alert("注册失败");
}
}

总结,以上的错误代码的原因checkUsername()的返回值是undefined,原因是异步请求不会等到它的function函数执行完才退出,所以在没有得到返回值的时候,函数已经结束了,所以无论用户名是否被通过校验都会进行注册

    解决办法有两种:

        1 将异步请求更改为同步请求;   (现在主流的都是前后端分离,所以建议使用异步请求)

        2 抽取一个全局保存异步请求的返回值即可

以下是我调试成功的代码:

        1 我在注册页面中register.html中用户输入框失去焦点的时候发送异步请求,判断当前用户有没有被注册过,结果返回显示在页面提示用户.异步请求的函数如下所示:

var res_username = false; //使用全局变量保存返回的值,一开始默认为false
function checkUsername() {
$.post("user","action=checkusername&username="+$("#username").val(),function (result) {
var flag = result.data;
if(!flag){
//用户名已经被重复注册了
$("#errors").html("该用户名不可用")
res_username= false;
}else{
$("#errors").html("");
res_username= true;
}
} ,"json");
}

　　2 我在注册按钮上绑定点击事件,再次验证用户名是否可用,根据判断决定是否进行注册

function register() {
if(res_username){
$.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {
var flag = result.data;
if(flag){
location.href = "login.html";
}else {
alert("注册失败");
}
},"json");
}else {
alert("注册失败");
}
}