jQuery中 ajax的使用

文章目录

jQuery 中的 ajax

jQuery 中有一套专门针对 AJAX 的封装，功能十分完善，经常使用，需要着重注意。

参考：

http://www.jquery123.com/category/ajax/
http://www.w3school.com.cn/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.com/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。