【代码】jQuery的AJAX

发表于 更新于 阅读次数：

前言

jQuery的AJAX学习笔记

发送请求

url：定义请求URL
type、method：定义请求类型，不区分大小写

GET：缺省值

data：请求参数
processData：默认为true，data的值如果为对象会将其转换为查询字符串，如果为false则不转换data定义的对象值
header：定义请求头
contentType：请求参数类型

application/x-www-form-urlencoded; charset=UTF-8：缺省值，查询字符串
application/json;charset=utf-8：JSON格式

dataType：定义响应数据类型，默认会根据响应头中Content-Type定义的响应数据类型自动转换
timeout：请求超时时间
async：定义请求是否为异步，缺省值为true
cache：定义请求是否缓存，缺省值为true
beforeSend：发送请求之前的回调函数，如果返回false会取消请求
success：请求成功后的回调函数
error：请求失败后的回调函数
complete：请求完成之后的回调函数，无论成功还是失败都会执行

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
  type: "POST",
  url: "<url>",
  contentType: "application/json;charset=utf-8",
  data: "<data>",
  success: function (result) {
    ...
  },
  error: function (xhr) {
    ...
  }
});
  • jQuery1.8扩展方法链式调用
1
2
3
4
5
6
7
8
9
10
$.ajax({
  type: "POST",
  url: "<url>"
}).done(function (result){
  ...
}).fail(function (){
  ...
}).always(function (){
  ...
});
  • Promise链式调用
1
2
3
4
5
6
7
8
9
10
$.ajax({
  type: "POST",
  url: "<url>"
}).then(function (result){
  ...
}).catch(function (){
  ...
}).finally(function () {
  ...
});

发送GET请求

1
2
3
4
5
6
7
8
$.get(
  "<url>",
  "<data>",
  function (result) {
    ...
  },
  "<dataType>"
);

发送JSON格式的响应的GET请求

  • getJSON()用于获取JSON格式的响应数据
1
2
3
4
5
6
7
$.getJSON(
  "<url>",
  "<data>",
  function (result) {
    ...
  }
);

发送POST请求

1
2
3
4
5
6
7
8
$.post(
  "<url>",
  "<data>",
  function (result) {
    ...
  },
  "<dataType>"
);

发送请求并绑定数据

1
<div id="app"></div>
1
$("#app").load("<url>", "<data>");

手动取消请求

1
2
3
var $jqXHR = $.ajax();

$jqXHR.abort();

请求参数定义

定义query请求参数

字符串拼接

1
2
3
4
5
$.ajax({
  type: "GET",
  url: "http://127.0.0.1:8080?key=value",
  contentType: "application/x-www-form-urlencoded;charset=UTF-8",
});

通过对象转换为查询字符串

1
2
3
4
5
6
7
8
9
$.ajax({
  type: "GET",
  url: "http://127.0.0.1:8080",
  data: {
    key: "value"
  },
  processData: true,
  contentType: "application/x-www-form-urlencoded;charset=UTF-8",
});

定义body请求参数

查询字符串

1
2
3
4
5
6
7
8
9
$.ajax({
  type: "POST",
  url: "http://127.0.0.1:8080",
  data: {
    key: "value"
  },
  processData: true,
  contentType: "application/x-www-form-urlencoded;charset=UTF-8",
});

JSON

手动转换JSON格式字符串
1
2
3
4
5
6
7
8
$.ajax({
  type: "GET",
  url: "http://127.0.0.1:8080",
  data: JSON.stringify({
    key: "value"
  }),
  contentType: "application/json;charset=UTF-8",
});

定义form请求参数

1
2
3
4
5
6
7
8
9
10
var formData = new FormData();
formData.append("key", "value");

$.ajax({
  type: "GET",
  url: "http://127.0.0.1:8080",
  data: formData,
  processData: false,
  contentType: false,
});

文件上传

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="file" id="file">

<script>
let formData = new FormData();
formData.append("file", $("#file")[0].files[0]);

$.ajax({
  type: "POST",
  url: "<url>",
  data: formData,
  processData: false,
  contentType: false,
  success: function (result) {
    console.log(result);
  },
  error: function (xhr) {
    console.log(xhr.statusText);
  }
});
</script>

踩坑

  • 控制台报错：Uncaught TypeError: 'append' called on an object that does not implement interface FormData.

解决问题

  • 在$.ajax()内缺少以下参数
1

完成

参考文献

间书——涎涎
CSDN——流觞海棠
CSDN——Dephi_CN