jQuery Ajax实例各种使用方法详解
在jquery中ajax实现方法分类很多种,如有:load、jQuery.get、jQuery.post、jQuery.getScript、jQuery Ajax 事件、jQuery.ajaxSetup等等,前面几种为常用的也是用得最多的jquery ajax方法了,我下面给大家来详细介绍这里ajax实现方法。
jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求
这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
示例
请求 test.php 网页,忽略返回值:
代码如下 | 复制代码 |
$.get("test.php"); |
例子 1
请求 test.php 网页,传送2个参数,忽略返回值:
代码如下 | 复制代码 |
$.get("test.php", { name: "John", time: "2pm" } ); |
例子 2
显示 test.php 返回值(HTML 或 XML,取决于返回值):
代码如下 | 复制代码 |
$.get("test.php", function(data){ |
例子 3
显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:
代码如下 | 复制代码 |
$.get("test.cgi", { name: "John", time: "2pm" }, |
例子 4
代码如下 | 复制代码 |
$.get("./Ajax.aspx", {Action:"get",Name:"lulu"}, function (data, textStatus){ |
jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求
参数:
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据,以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。示例代码:
Ajax.aspx:
代码如下 | 复制代码 |
Response.ContentType = "application/json"; |
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
•url:是指要导入文件的地址。
•data:可选参数;因为Load不仅仅可以导入静态的html文件,还可以导入动态脚本,例如PHP文件,所以要导入的是动态文件时,我们可以把要传递的参数放在这里。
•callback:可选参数;是指调用load方法并得到服务器响应后,再执行的另外一个函数。
一:如何使用data
1.加载一个php文件,该php文件不含传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php"); |
//在id为#myID的元素里导入test.php运行后的结果
2. 加载一个php文件,该php文件含有一个传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php",{"name" : "Adam"}); |
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam
3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔
代码如下 | 复制代码 |
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"}); |
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com
4. 加载一个php文件,该php文件以数组作为传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]}); |
//导入的php文件含有一个数组传递参数。
注意:使用load,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。
二:如何使用callback
比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。代码如下:
代码如下 | 复制代码 |
$("#go").click(function(){ $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ $("#myID").fadeIn('slow');} ); }); |
备注:
在load的url里加上空格后面就可以跟选择器了。
例如:
代码如下 | 复制代码 |
$("body").load("test.html #a"); |
这个方法可以很方便的动态加载一些HTML文件,例如表单。
示例代码:
代码如下 | 复制代码 |
$(".ajax.load").load("1500682.html .post", |
jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。
参数
url (String) : 待载入 JS 文件地址。
callback (Function) : (可选) 成功载入后回调函数。
通过 HTTP GET 请求载入并执行一个 JavaScript 文件。
jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。注意:Safari 2 或更早的版本不能在全局作用域中同步执行脚本。如果通过 getScript 加入脚本,请加入延时函数。
参数
url,[callback]String,FunctionV1.0url:待载入 JS 文件地址。
callback:成功载入后回调函数。
示例
描述:
载入 <a title="/color" class="external text" href="h/color">jQuery 官方颜色动画插件</a> 成功后绑定颜色变化动画。
代码如下 | 复制代码 |
HTML 代码: |
描述:
加载并执行 test.js。
jQuery 代码:
$.getScript("test.js");
描述:
加载并执行 test.js ,成功后显示信息。
jQuery 代码:
代码如下 | 复制代码 |
$.getScript("test.js", function(){ |
jQuery Ajax 事件
Ajax会触发很多事件。
有两种事件,一种是局部事件,一种是全局事件:
局部事件:通过$.ajax来调用并且分配。
代码如下 | 复制代码 |
$.ajax({ |
全局事件,可以用bind来绑定,用unbind来取消绑定。这个跟click/mousedown/keyup等事件类似。但他可以传递到每一个DOM元素上。
代码如下 | 复制代码 |
$("#loading").bind("ajaxSend", function(){ //使用bind |
当然,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false
代码如下 | 复制代码 |
$.ajax({ |
事件的顺序如下:
ajaxStart 全局事件
开始新的Ajax请求,并且此时没有其他ajax请求正在进行。
beforeSend 局部事件
当一个Ajax请求开始时触发。如果需要,你可以在这里设置XHR对象。
ajaxSend 全局事件
请求开始前触发的全局事件
success 局部事件
请求成功时触发。即服务器没有返回错误,返回的数据也没有错误。
ajaxSuccess 全局事件
全局的请求成功
error 局部事件
仅当发生错误时触发。你无法同时执行success和error两个回调函数。
ajaxError 全局事件
全局的发生错误时触发
complete 局部事件
不管你请求成功还是失败,即便是同步请求,你都能在请求完成时触发这个事件。
ajaxComplete 全局事件
全局的请求完成时触发
ajaxStop 全局事件
当没有Ajax正在进行中的时候,触发。
局部事件回调的参数在文档中写的很清楚了,这里就不累述了。
全局事件中,除了ajaxStart和ajaxStop之外,其他的事件都有3个参数
event, XMLHttpRequest, ajaxOptions
第一个是事件,第二个是XHR对象,第三个参数最有用,是当时调用这个ajax的时候的参数。
对于ajaxError,还有第四个参数thrownError,只有当异常发生时才会被传递。
我们可以利用ajaxOptions来写一个全局的ajax事件。
比如
代码如下 | 复制代码 |
$("#msg").beforeSend(function(e,xhr,o) { |
对于这个例子,
这样我们就可以很方便的全局地在某个地方显示当前的ajax状态。
当然,之前说了,第三个参数实际上是传递给ajax的参数。get/post/load/getScript/getJSON等方法本质上都是调用ajax方法的,所以ajaxOptions.url属性总是有效的。
还有更丰富的例子。
如果你用ajax调用,还可以传递自定义参数。下面的例子我就自定义了一个msg参数给了ajax调用
代码如下 | 复制代码 |
//自定义参数msg |
jQuery Ajax实例各种使用方法详解的更多相关文章
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- jquery之wrap(),wrap(),unwrap()方法详解
[注]wrap():为每个匹配元素外面添加指定的HTML结构, wrapAll(): 为所有匹配元素(作为一个整体)外面添加一个指定的HTML结构 原文地址:http://www.365mini.co ...
- jQuery Ajax异步处理Json数据详解
先我们来看一个官方的实例使用 AJAX 请求来获得 JSON 数据,并输出结果: $("button").click(function(){ $.getJSON("dem ...
- 关于jQuery.ajax()的jsonp碰上post详解
前言 以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑. 下面来一起看看详细的介绍: 关于跨域请求与 ...
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
在写代码的时候,经常会用到懒加载的模式,以前是通过window.onload的模式去加载,但是图片很多或者用ajax请求的时候,就会很麻烦,现在用lazyload的模式加载方便很多 <!doct ...
- jquery 键盘事件的使用方法详解
转自:https://www.jb51.net/article/123579.htm jQuery处理键盘事件有三个函数,根据事件发生的顺序分别是: jquery 代码: 1. keydown(); ...
- $.ajax()方法详解 jquery
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Str ...
- jQuery中 $.ajax()方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
- jQuery - Ajax ajax方法详解
$.ajax()方法详解 jquery中的ajax方法参数总是记不住,这里记录一下. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为Strin ...
随机推荐
- ffmpeg在asp.net 视频转换
ffmpeg是一个源于Linux的工具软件,是FLV视频转换器,可以轻易地实现FLV向其它格式avi.asf. mpeg的转换或者将其它格式转换为flv.在视频播客中,我们通常使用它把我们上传的视频转 ...
- CentOS 6.5 升级内核
Docker需要3.10以上内核支持,Centos6.5 默认内核为2.6.所以手动编译安装3.10内核. 查看当前系统内核版本 [root@gu ~]# uname -r2.6.32-431.el6 ...
- 1021. Deepest Root (25)
A graph which is connected and acyclic can be considered a tree. The height of the tree depends on t ...
- 9、Python-文件操作
打开关闭文件 # 打开一个已经存在的文件,或者创建一个新文件 f = open('test.txt', 'w') # 关闭这个文件 f.close() 访问模式 说明 r 以只读方式打开文件.文件的指 ...
- Overload和Override的区别 C++ Java
Overload:顾名思义,就是Over(重新)——load(加载),所以中文名称是重载. 它可以表现类的多态性,可以是函数里面可以有相同的函数名但是参数名.返回值.类型不能相同: 或者说可以改变参数 ...
- IDEA中导入多个包自动合并为星号
IDEA中导入同一个包下的几个class会自动合并为星号,如下图.可以通过设置让其不自动合并为星号. 1.选择File→Settings→Editor→Code style→Java,再点击右边的Im ...
- Linux_安装
总结: 分区-->格式化-->起一个设备文件名(逻辑分区一定从5开始)-->指定挂载点(必须是空的目录名称作为盘幅)
- Tomcat中配置URIEncoding="UTF-8"来处理中文的方法
http://www.cnblogs.com/seabird1979/p/4837237.htmlTomcat中配置URIEncoding="UTF-8"来处理中文的处理打开 se ...
- dos 设置 Windows 网络命令
dos 设置Windows 命令: netsh interface ip set address name="本地连接" source=static addr=172.16.12. ...
- mysql 开源~canal安装解析
一 简介:今天咱们来聊聊canal的一些东西 二 原理: canal模拟mysql slave的交互协议,伪装自己为mysql slave,向mysql master发送dump协议 mysql ma ...