【jQuery】jQuery中的Ajax
2014-11-09 13:02
127 查看
加载异步(静态)数据
load() - 加载html格式数据
语法格式为:load(url, [data], [callback])
参数url为被加载的页面地址,可选项[data]参数表示发送到服务器的数据,其格式为 key / value ,另一个可选项 [callback] 表示参数加载成功后,返回至加载页的回调函数。
全局函数 - getJSON() - 加载json格式数据
用于调用JSON格式的数据,其调用的语法格式为:$.getJSON(url, [data], [callback])
参数url表示请求的地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value,可选项[callback]参数表示加载成功时执行的回调函数。
例如:
$("#Button1").click(function(){ $.getJSON("userinfo.json", function(data){ $("#divTip").empty(); var strHTML = ""; $.each(data, function(InfoIndex, Info){ strHTML += "姓名" + Info["name"] + ""; strHTML += "性别" + Info["sex"] + ""; strHTML += "邮箱" + Info["email"] + ""; }) $("#divTip").html(strHTML); }) })
userinfo.json:
{ { "name": "1", "sex":"2", "email":"3" }, { "name":"4", "sex":"5", "email":"6" } }
全局函数 - getScript() - 加载js格式数据
用于获取.js文件的内容。在jQuery中,通过全局函数getScript()加载.js文件后,不仅可以像加载页面片段一样轻松地注入脚本,而且所注入的脚本自动执行。其调用格式如下:
$.getScript(url, [callback])
url参数为等待加载的JS文件地址,可选项[callback]参数表示加载成功时执行的回调函数。
例如:
$("Button1").click(function(){ $.getScript("userinfo.js"); })
userinfo.js
var data = [ { "name":"1", "sex":"2", "email":"3" }, { "name":"4", "sex":"5", "email":“6” } ]; var strHTML = ""; $.each(data, function(){ strHTML += "姓名" + this["name"] + ""; strHTML += "性别" + this["sex"] + ""; strHTML += "邮箱" + this["email"] + ""; }) $("#divTip").html(strHTML);
全局函数 - get() - 加载html, xml, js, json, text等格式数据
调用的语法格式为:$.get(url, [data], [callback], [type])
参数url表示等待加载的数据地址,可选项[data]参数表示发送到服务器的数据,其格式为key/value,可选项[callback]参数表示加载成功时执行的回调函数,可选项[type]参数表示返回数据的格式,如html, xml, js, json, text等
请求服务器(动态)数据
$.get()请求数据
客户端向服务器传递参数时,使用的格式是{key0:value0, key1:value1, ... ... },如果参数的值是中文格式,必须通过使用encodeURL()来进行转码,在客户端接受时,使用decodeURL进行解码即可。函数格式参见上一节。
$.post()请求数据
$.post()也是带参数向服务器发出数据请求。全局函数$.post()与$.get()在本质上没有太大的区别,所不同的是,GET方式不适合传递数据量较大的数据,同时,其请求的历史信息会保存在浏览器的缓存中。$.post()函数调用的语法格式如下:
$.post(url, [data], [callback], [type])
serialize()序列化表单
该方法的功能将所选择的DOM元素转换成能随AJAX传递的字符串,即序列化所选的DOM元素。例如:
$.post("userinfo.aspx", $("#frmuserinfo").serialize(), function(data){... ...})
serialize()方法自身有很多的不足,如表单中有多项被选中时,该方法只能传递一项的值,因此,在选择传递参数时,须慎重考虑。
$.ajax()方法
$.ajax()的基本概念
在jQuery中,$.ajax()方法是最底层的方法,也是功能最强的方法。其调用的语法格式为:
$.ajax([options])
可选项参数[options]为$.ajax()方法中的请求设置,其格式为 key / value ,即包含发送请求的参数,也含有服务器响应后回调的数据。
$.ajax()方法中的参数列表:
参数名 | 类型 | 描述 |
url | String | 发送请求的地址(默认为当前页面) |
type | String | 数据请求的方式(post 或 get),默认为get |
data | String或Object | 发送到服务器的数据,如果不是字符串则自动转换成字符串格式,如果是get请求方式,那么,该字符串将附在url的后面 |
dataType | String | 服务器返回的数据类型,如果没有指定,jQuery将自动根据HTTP包MIME信息自动判断,服务器返回的数据根据自动判断的结果进行解析,传递给回调函数,其可用类型为: html:返回纯文本的HTML信息,包含的Script标记会在插入页面时被执行 script:返回纯文本JavaScript代码 text:返回纯文本的字符串 xml:返回可被jQuery处理的XML文档 json:返回JSON格式的数据 |
beforeSend | Function | 该函数用于发送请求前修改XMLHttpRequest对象,其中的参数就是XMLHttpRequest对象,由于该函数本身是jQuery事件,因此,如果函数返回false,则表示取消本次事件 |
complete | Function | 请求完成后调用的函数,该函数无论数据发送成功或失败都会调用,其中有两个参数,一个是XMLHttpRequest对象,另外一个是strStatus,用于描述成功请求类型的字符串 |
success | Function | 请求成功后返回的回调函数,该函数有两个函数,一个是根据参数datType处理后服务器返回的数据,另外一个是strStatus,用于描述状态的字符串 |
error | Function | 请求失败后调用的函数,该函数有三个参数,第一个是XMLHttpRequest对象,第二个是出错信息strError,第三个是捕捉到的错误对象strObject |
timeout | Number | 请求超时的时间(毫秒) |
global | Boolean | 是否响应全局事件,默认是true,表示响应,如果设置成false,表示是不响应 |
async | Boolean | 是否为异步请求,默认为true,表示是异步,如果设置成false,表示是同步请求 |
cache | Boolean | 是否进行页面缓存,true表示进行缓存,false表示不进行页面缓存 |
$.ajaxSetup()设置全局Ajax
在jQuery中,可以使用$.ajaxSetup()方法设置全局性的ajax默认选项,一次设置,全局有效。调用格式为:
$.ajaxSetup([options])
可选参数[options]是一个对象,通过该对象可以设置$.ajax()方法中的参数。
Ajax中的全局事件
jQuery中的 6 个全局Ajax事件如下:事件名称 | 参数 | 功能描述 |
ajaxComplete(callback) | callback | Ajax请求完成时执行函数 |
ajaxError(callback) | callback | Ajax请求发送错误时执行函数,其中捕捉到的错误可以作为最后一个参数进行传递 |
ajaxSend(callback) | callback | Ajax请求发送前执行函数 |
ajaxStart(callback) | callback | Ajax请求开始时执行函数 |
ajaxStop(callback) | callback | Ajax请求结束时执行函数 |
ajaxSuccess(callback) | callback | Ajax请求成功时执行函数 |
在事件绑定时,Ajax中的全局事件可以绑定在页面的任何一个元素中。
相关文章推荐
- jquery validationEngine 使用ajax验证不通过也提交表单
- jquery里的AJAX的返回值问题,总是return ture!
- jQuery 的ajax操作
- JavaScript、Ajax与jQuery的关系
- jquery是如何清除ajax缓存的
- Jquery中$.get(),$.post(),$.ajax(),$.getJSON()对比
- 用 jQuery 和 Ajax 构建富 Internet 应用程序
- jquery中通过ajax调用webservice传递数组参数的问题
- AJAX+JQuery+SpringMVC实现图片上传
- 【1】jQuery异步(Ajax)操作之JSONP [转]
- jQuery Validate插件ajax方式验证输入值的实例
- JQuery_JAVA_利用jQuery的AJAX和JSON实现可输入下拉框提示
- Jquery.ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
- jQuery基于ajax操作json数据简单示例
- jquery中的ajax方法参数
- jquery高版本的ajax调用
- jQuery 1.5发布 Ajax模块重写
- AJAX提交表单后要清空,否则再次提交原来的数据会认为重复提交,提交失败。使用ajaxSubmit 函数需要引入jquery.form.min.js 文件
- jQuery通过ajax请求php遍历json数组到table中的代码(推荐)