初学者使用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 }

　　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 }

原文地址：https://www.cnblogs.com/songyoulian/p/10055793.html