Ajax在jQuery中的应用($.ajax()方法)
Ajax() 方法
- $.ajax() 中的参数及使用方法
在jQuery中,$.ajax() 是最底层的方法,也是功能最强的方法。$.get()、$.post()、$.getScript()、getJSON() 都是在此方法上建立的。
$.ajas([options])
参数名 | 类型 | 功能描述 |
url | String | 发送请求的地址 |
type | String | 数据请求的方式(post 或 get),默认为get |
data | String 或 object | 发送到服务器的数据。如果不是字符串则自动转成字符串,如果是get方式,那么,该字符串将附在url的后面 |
dataType | String |
服务器返回的数据类型,如果没有指定,jQuery将自动根据 HTTP 包 MIME 信息自动判断,服务器返回的数据根据自动判断的结果进行解析,传递给回调函数。其可用类型为: html:返回纯文本的 HTML 信息,包含的 Script 标记会插入页面时执行 script:返回纯文本 JavaScript 代码 |
beforeSend | Function | 该函数用于发送请求前修改 XMLHttpRequest 对象,其中的参数就是 XMLHttpRequest 对象,由于该函数本身是jQuery事件,因此,如果函数返回 false ,则表示取消本次请求 |
complete | Function | 请求完成后调用的回调函数,该函数无论数据发送成功或失败都会调用,其中有两个参数,一个是 XMLHttpRequest 对象另一个是strStatus,用于描述成功请求类型的字符串 |
success | Function | 请求成功后调用的回调函数,该函数有两个参数,一个是根据参数 dataType 处理后服务器返回的数据,另一个是 strStatus 用于描述状态的字符串 |
error | Function | 请求失败后调用的回调函数,该函数有三个参数,第一个是 XMLHttpRequest 对象,第二个是出错信息strError,第三个是捕捉到的错误对象 strObject |
timeout | Number | 请求超时的时间(毫秒),该设置将覆盖 $.ajax() 方法中的同样设置 |
global | Boolean | 是否响应全局事件,默认是true,表示响应,如果设置成false,表示不响应。那么,全局事件 $.ajax() 等将不响应 |
async | Boolean | 是否异步请求,默认为 true ,表示异步,如果设置为 false,表示同步请求 |
cache | Boolean | 是否进行页面缓存,true 表示进行缓存,false表示不进行缓存 |
//ajax $.ajax({ url: "@Url.Action("AjaxTest","Ajax")", //自动识别返回数据类型 //dataType: "JSON", data: { name: $("input[name=name]").val(), pwd: $("input[name=pwd]").val(), email: $("input[name=email]").val() }, success: function (data) { if (data!=null) { var strHTML = ""; //strHTML += "name:" + data["name"] + "<br>"; //strHTML += "sex:" + data["sex"] + "<br>"; //strHTML += "email:" + data["email"] + "<hr>"; strHTML += "name:" + data.name + "<br>"; strHTML += "sex:" + data.pwd + "<br>"; strHTML += "email:" + data.email + "<hr>"; $("#tip").html(strHTML); } else { alert("请求失败!"); } }, error: function () { alert("请求失败!"); } })
- $.ajaxStetup() 设置全局 Ajax
//ajaxsetup $.ajaxSetup({ //设置全局属性的Ajax选项,什么是全局就添加什么 url: "@Url.Action("AjaxTest","Ajax")", data: { name: $("input[name=name]").val(), pwd: $("input[name=pwd]").val(), email: $("input[name=email]").val() }, error: function () { alert("请求数据失败!"); } }) $("#btn_ajax").click(function () { $.ajax({ success: function (user) { var strHTML = ""; strHTML += "name:" + user.name + "<br>"; strHTML += "sex:" + user.pwd + "<br>"; strHTML += "email:" + user.email + "<hr>"; $("#tip").append(strHTML); } }) }) $("#btn_ajax2").click(function () { $.ajax({ success: function (user) { var strHTML = ""; strHTML += "name:" + user["name"] + "<br>"; strHTML += "sex:" + user["pwd"] + "<br>"; strHTML += "email:" + user["email"] + "<hr>"; $("#tip").append(strHTML); } }) })
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 请求成功时执行函数 |