平常越不留意的东西越容易犯错,前些天在做注册案例的时候,用到了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 }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 }总结,以上的错误代码的原因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 }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 }初学者使用json+ajax作注册判断的时候容易犯的一个错误
原文地址：https://www.cnblogs.com/songyoulian/p/10055793.html