文档章节

Ajax中的2个容易忽略的地方

Jceee
 Jceee
发布于 2014/12/28 16:49
字数 511
阅读 52
收藏 0

        Ajax在WEB程序中是一件利器,无论api的调用,还是与后台数据的交互等都需要用到,这儿记录下在使用过程中发现2个容易忽略而导致错误的地方,这两个地方也是一些javascript的基础知识,也可以当作重温一下javascript的基础。


        1. 异步获取数据

        异步是指,在ajax发送请求后,会继续执行下面的方法,直到请求返回时,再回过头来执行ajax中的回调方法。这也是ajax异步的强大之处,不会因为请求而影响程序的执行时间。但如果你下面执行的代码中,有需要请求返回的数据,那就会发生错误了,因为请求还没回来,你的代码就执行了。如下:

 $.ajax({
 
     url:'/test/test.php',
     dataType:'json',
     type:'get',
     
     success:function(data){
          console.log(1);
     }
});
console.log(2);
//控制台结果:
//2
//1

       你会发现,控制台先出现的数字是2,之后才是1。如果后面有需要用到请求返回数据的代码,不妨写在回调方法success的function里面。


       2.ajax中的this变量

       在一个对象中,this变量代表的是自身这个对象,而在ajax中,this变量所代表的是传入ajax中的对象本身,如下:

var testObj = {

   type : 'this is testObj.type',
   
   test : function(){
   
        console.log('this.type:' + this.type);
        var _this = this;
        
        $.ajax({
        
            url:'/test/test.php',
            dataType:'json',
            type:'get',
            
            success:function(data){
                console.log('this.type in ajax:' + this.type);
                console.log('_this.type:' + _this.type);
            }
        });
    }
};
testObj.test();
//控制台出现的数据是:
//this.type:this is testObj.type 
//this.type in ajax:get 
//_this.type:this is testObj.type

       所以说,要在ajax中使用this指向ajax以外的对象,是会导致一些错误的,所以先在ajax外面将this赋值给别的变量就可以了。如上面的_this。



© 著作权归作者所有

上一篇: PHP实现懒加载
下一篇: intval边界值
Jceee
粉丝 17
博文 47
码字总数 19440
作品 0
广州
程序员
私信 提问
jquery.validationEngine ajax验证 不通过也提交表单

今天用到了jquery.validationEngine ajax验证,碰到了一个让人很郁闷的问题 ajax验证不通过时也提交表单,在网上找了半天也没找到答案,让人很 没办法,看源码了 调试了半天,终于找到点眉目...

我心悠悠
2011/12/03
0
7
form-binder v0.5.0 发布,微型数据绑定和校验框架

客户端和服务器端都需要校验用户输入,同一套校验逻辑最好不要写两遍,可以都定义在服务器端,客户端(浏览器)通过 ajax 方式来复用。 为了有效的支持上述应用场景,这次增强在 FormBinder...

Tu_Minglei
2014/10/09
591
0
php+ajax长轮询实现web即时聊天

web im的实现方式有很多种: 1.普通轮询,原理通过js定时重复发送ajax请求服务端,获取数据后显示。 2. 长轮询,ajax请求服务端,服务端有数据会立即返回。服务端无数据时会一直等待,直到有...

hgditren
2017/01/10
0
0
Beetl 2.2.4 发布,java模板引擎

Beetl 2.2.4 发布,更新内容如下: 新增功能: #175:jodd3.3 MVC最新版本支持 #170:struts2 增加contentType配置 Bug修复: #178: 精度计算除法可能抛错bug修复 #177: 忽略客户端IO错误 #176...

闲大赋
2015/07/20
1K
19
Ajax轮询——“定时的通过Ajax查询服务端”

Ajax轮询——"定时的通过Ajax查询服务端"。 概念: 轮询(polling):客户端按规定时间定时像服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接。 百闻不如一见,来段代码相信...

gzchen
2018/08/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击!

任正非对华为热点问题的回应亮了,终于知道华为为什么能扛过这一次的冲击! 如果你是华为的老板,看到一条传遍网络的“美国封锁华为”、“华为禁令”的消息,你会怎么办? 昨天上午,华为创始...

forespider
38分钟前
1
0
Java HTTP 组件库选型看这篇就够了

最近项目需要使用 Java 重度调用 HTTP API 接口,于是想着封装一个团队公用的 HTTP client lib. 这个库需要支持以下特性: 连接池管理,包括连接创建和超时、空闲连接数控制、每个 host 的连...

Java面经
39分钟前
2
0
nginx 重启

在 nginx.config 配置目录下 输入命令: nginx -s reload 在 nginx 中,如果我修改了一个配置文件,或者新增了一个配置文件。按照群里网友的描述,我需要关闭 nginx,或者重启 nginx,比较麻...

MrBoyce
40分钟前
0
0
Cesium中级5 - Terrain 地形

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ CesiumJS支持对与水流相关的海洋、湖泊和河流以及全球高分辨率地形进行流式处理和可视化。查看山峰、山谷...

Cesium中文网
53分钟前
0
0
搭建jupyter+nginx服务

Tips:该文章面向Mac和centos用户,如果是Windows用户,请先安装虚拟机。 概述 Jupyter Notebook(此前被称为 IPython notebook)是一个交互式笔记本,支持运行 40 多种编程语言。 Jupyter ...

阿dai学长
54分钟前
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部