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

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

 

(如下是错误案例)

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

 1 function checkUsername() {  2 $.post("user","action=checkusername&username="+$("#username").val(),function (result) {  3 var flag = result.data;  4 if(!flag){  5 //用户名已经被重复注册了
 6 $("#errors").html("该用户名不可用")  7     return false;  8 }else{  9 $("#errors").html(""); 10     return true; 11 } 12 } ,"json"); 13 }

View Code

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

 1 function register() {  2 if(checkUsername()){   //再次发送异步请求
 3 $.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {  4 var flag = result.data;  5 if(flag){  6 location.href = "login.html";  7 }else {  8 alert("注册失败");  9 } 10 },"json"); 11 }else { 12 alert("注册失败"); 13 } 14 }

View Code

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

    解决办法有两种:

        1 将异步请求更改成同步请求;   (如今主流的都是先后端分离,因此建议使用异步请求)

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

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

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

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

View Code

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

 1 function register() {  2 if(res_username){  3 $.post("user","action=register&username="+$("#username").val()+"&password="+$("#pwd").val(),function (result) {  4 var flag = result.data;  5 if(flag){  6 location.href = "login.html";  7 }else {  8 alert("注册失败");  9 } 10 },"json"); 11 }else { 12 alert("注册失败"); 13 } 14 }

View Code

 

 

 

 

 

 

 

 

 

原文出处：https://www.cnblogs.com/songyoulian/p/10055793.html