文章目录
- jQuery 中的 ajax
- 1. $.ajax
- 常用选项参数介绍:
- 2. $.get
- 3. $.post
- 4. 全局事件处理
- 5. jQuery其他ajax操作函数
jQuery 中的 ajax
jQuery 中有一套专门针对 AJAX 的封装,功能十分完善,经常使用,需要着重注意。
参考:
http://www.jquery123/category/ajax/
http://www.w3school/jquery/jquery_ref_ajax.asp
1. $.ajax
$.ajax({
url: './get.php',
type: 'get',
dataType: 'json',
data: { id: 1 },
beforeSend: function (xhr) {
console.log('before send')
},
success: function (data) {
console.log(data)
},
error: function (err) {
console.log(err)
},
complete: function () {
console.log('request completed')
}
})
常用选项参数介绍:
- url:请求地址
- type:请求方法,默认为 get dataType:服务端响应数据类型
- contentType:请求体内容类型,默认 application/x-www-form-urlencoded
- data:需要传递到服务端的数据,如果 GET 则通过 URL 传递,如果 POST 则通过请求体传递timeout:请求超时时间
- beforeSend:请求发起之前触发
- success:请求成功之后触发(响应状态码 200)
- error:请求失败触发
2. $.get
GET 请求快捷方法
$.get('json.php', { id: 1 }, function (res) {
console.log(res)
})
3. $.post
POST 请求快捷方法
$.post('json.php', { id: 1 }, function (res) {
console.log(res)
})
4. 全局事件处理
http://www.jquery123/category/ajax/global-ajax-event-handlers/
-
ajaxComplete()
当Ajax请求完成后注册一个回调函数。这是一个 AjaxEvent。 -
ajaxError()
Ajax请求出错时注册一个回调处理函数,这是一个 Ajax Event。 -
ajaxSend()
在Ajax请求发送之前绑定一个要执行的函数,这是一个 Ajax Event. -
ajaxStart()
在AJAX 请求刚开始时执行一个处理函数。 这是一个 Ajax Event. -
ajaxStop()
在AJAX 请求完成时执行一个处理函数。 这是一个 Ajax Event。 -
ajaxSuccess()
绑定一个函数当 Ajax 请求成功完成时执行。 这是一个Ajax Event.
5. jQuery其他ajax操作函数
$.getJSON():返回过来的数据全部转化为json格式
$.getJSON('json.php', { id: 1 }, function (res) {
console.log(res)
})
$(selector).load():当指定的元素(及子元素)已加载时,会发生 load() 事件。
案例:当图片加载时,改变 div 元素的文本:
$("img").load(function(){
$("div").text("Image 已加载");
});
$.getScript():getScript() 方法使用 AJAX 的 HTTP GET 请求获取和执行 JavaScript。
更多推荐
jQuery中 ajax的使用
发布评论