jQuery中 ajax的使用

朱雀 2022-11-15 11:53 186阅读 0赞

### 文章目录 ###

*  jQuery 中的 ajax
 *   *  1. $.ajax
     *   *  常用选项参数介绍：
     *  2. $.get
     *  3. $.post
     *  4. 全局事件处理
     *  5. jQuery其他ajax操作函数

# jQuery 中的 ajax #

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

> 参考：
> 
> [http://www.jquery123.com/category/ajax/][http_www.jquery123.com_category_ajax]  
> [http://www.w3school.com.cn/jquery/jquery\_ref\_ajax.asp][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/  
][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。

[http_www.jquery123.com_category_ajax]: http://www.jquery123.com/category/ajax/
[http_www.w3school.com.cn_jquery_jquery_ref_ajax.asp]: http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp
[http_www.jquery123.com_category_ajax_global-ajax-event-handlers_]: http://www.jquery123.com/category/ajax/global-ajax-event-handlers/