ajax的异步加载和return的失效

         在开发中,我在做一个很简单的功能,验证码校验并提交表单,在做这个功能时,遇到里ajax的这2个问题:return无效,执行顺序不符合我的预期。以前也遇到类似的问题,但是解决之后没去总结,也没去细究其中的原理和原因。这样没有起到积累知识的作用,再次遇到不一定能记起,今天总结记录一下。

         AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

         ajax作为前端和后台交互的一种方式,使用起来很方便。但是ajax是异步加载的,所以在js里的执行顺序,不一定按照你想的那样顺序去执行。还有ajax里success里的return方法,也不一定如你所希望的那样结束方法,返回你需要的值。只要理解ajax的异步加载的特性,这些问题就很好解决了。还有一点,ajax最大的特性是页面无刷新获取服务器数据,用它做不了页面跳转,可以用window.location.href跳转。   

        两个问题的原因其实是用一个,那就是ajax是异步的。

       return无效。我当时写的是一个alidator校验手机验证码,验证通过则进行下面的表单提交,结果它并没有验证,直接去提交表单了。解决方法很简单,返回不要写在ajax里面,写在外面。

function register(){
	if(validator()){
		$("#register").submit();
	}
}
//改进前
function validator(){
	var code = $("#code").val();
	$.ajax({
        type: "post",
        url: "/register/validatorm",
        data: {code:code},
        dataType: "text",
        success: function(data){
            if(data.success){
            	return true;
            }else{
            	return false;
            }
        },
        error: function() {
        	return false;
        }
    });
}
//改进后
function validator(){
	var code = $("#code").val();
	var flag = false;
	$.ajax({
        type: "post",
        url: "/register/validatorm",
        data: {code:code},
        dataType: "text",
        success: function(data){
            if(data.success){
            	flag = true;
            }else{
            	flag = false;
            }
        },
        error: function() {
        	flag = false;
        }
    });
	
	if(flag){return true;}else{alert("验证码错误");return;}
}
       另一个问题,不按我预期的顺序执行。我当时需要执行2个判断,然后进行业务提交。当时需要写了2个ajax,结果执行结果很糟糕,逻辑顺序乱成一团。解决方法依然很简单,ajax嵌套。一个ajax的success里,写另一个ajax,则它一定只会在这个ajax执行成功后才会被执行。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

坚持是一种态度

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值