Jquery中$.post和$.ajax的用法小结

下面我将详细讲解“Jquery中$.post和$.ajax的用法小结”的完整攻略。

什么是 $.post 和 $.ajax

$.post 和 $.ajax 都是 jQuery 提供的用于发送 AJAX 请求的方法。

• $.post 是 jQuery 中一个进行 post 请求的方法
• $.ajax 是 jQuery 提供的最底层的 AJAX 请求方法，它可以接收更多的请求选项，并能够将请求结果转化为不同类型(jqXHR对象)的数据

两者的区别

$.post 是 $.ajax 的一个简化版，二者大部分属性和方法都是相通的，$.post 可以实现基本的post提交请求，$.ajax 相对来说可以定制性高且更自由。

区别如下：

• $.post 的默认 contentType 是 application/x-www-form-urlencoded，默认以键值对形式提交数据，$.ajax 没有默认值
• $.post 是 $.ajax 针对 post 方式的简化版，$.post 可以实现 $.ajax 所能实现的功能
• $.ajax 可以通过执行 beforeSend 选项，来在发出请求之前设置发出的选项，而 $.post 不可以

$.post 和 $.ajax 的使用方法

$.post 的使用

$.post(url, data, callback, data_type)

各参数解释如下：

• url：发送请求的地址
• data：发送到服务器的数据，可以是普通对象类型或查询字符串形式的字符串。
• callback：请求成功后执行的回调函数。
• data_type：预计返回的数据类型，一般可以自动根据MIME类型识别。

以下为示例代码：

$.post('/api/login', {username: 'John', password: '123456'}, function(data, status) {
    alert('Data: ' + data + ', Status: ' + status);
});

$.ajax 的使用

$.ajax({
    url : '',            //请求地址
    type : 'post',       //请求类型 post/get
    dataType : 'json',   //预期服务器返回的数据类型
    contentType : '',    //发送信息至服务器时内容编码类型
    data: {              //发送给服务器的数据
        id : '',
        name : '',
    },
    success : function(data) {
        console.log(data);
    },
    error : function(e) {
        console.log(e);
    }
});

各参数解释如下：

• url：请求地址（必选）
• type：请求方法（默认为 GET）
• dataType：预期的响应数据格式（默认为 JSON）
• contentType：发送数据至服务器的内容类型。默认情况下为："application/x-www-form-urlencoded"，适合大部分情况下使用，所以一般不需要设置该属性。
• data：发送给服务器的数据。可以为普通对象，可以为查询字符串形式的字符串（必选）
• success：请求成功时的回调函数（非必选）
• error：请求出错时的回调函数（非必选）

以下为示例代码：

$.ajax({
  type: "POST",
  url: "/api/login",
  data: {
    username: "John",
    password: "123456"
  },
  success: function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
  }
});

总结

总的来说，$.post 和 $.ajax 都是非常常用的在 jQuery 中发送 AJAX 请求的方法。$.post 更适合简单请求，$.ajax 更适用于定制性强的请求。由于Ajax可以避免网页的刷新，从而提升用户体验，所以Ajax已经成为了Web开发中不可或缺的一部分。