ajax基本操作

常用的ajax调用后台接口例子,方便必要时查阅。
主要包括 jQuery和js原生两种方式,GET、POST、DELETE等HTTP方式的测试。

  • 调用ajax操作会存在跨域问题,首先后台接口需要配置跨域支持
  • 浏览器不支持直接打开html文件进行跨域,因此需要将html放入http服务器中进行测试

使用http-server静态文件服务器:

1
2
3
4
5
#intall node.js
npm install -g http-server
cd /test_path
http-server -p 8090
#即可将当前目录作为静态服务器。

测试html模板,后续测试方法放入<script><script>标签即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="jquery.min.js"></script>
</head>

<body>
<button id="btnPost" type="button">post</button>
<button id="btnGet" type="button">get</button>
<button id="btnDel" type="button">delete</button>
<button id="btnDownload" type="button" onclick="btnDownload()">download</button>
<script>
...
<script>
</body>

</html>

使用ajax执行POST操作,指定请求头的 Content-Type,发送json数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
$("#btnPost").click(function() {
$.ajax({
type: "POST",
url: "http://192.168.0.105:8080/user/login",
contentType: "application/json; charset=utf-8",
data: '{"username":"user","password":"12020c923adc6c92"}',
dataType: "json",
success: function(message) {
console.log("success" + message);
},
error: function(message) {
console.log("error" + message);
}
});
});
});

使用ajax执行GET操作,指定请求头的 Content-Type,自定义请求头发送token

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
$("#btnGet").click(function() {
$.ajax({
type: "GET",
url: "http://192.168.0.105:8080/users",
beforeSend: function(request) {
request.setRequestHeader("X-Token", "9NdOCAl73S6ut7Lj7Fz0KVV5AcujnOb2BBV4kCxeGwM");
},
contentType: "application/json; charset=utf-8",
success: function(message) {
console.log("success" + message);
},
error: function(message) {
console.log("error" + message);
}
});
});
});

使用ajax执行DELETE操作,指定请求头的 Content-Type,自定义请求头发送token

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
$("#btnDel").click(function() {
$.ajax({
type: "DELETE",
url: "http://192.168.0.105:8080/user/delete?id=123456",
beforeSend: function(request) {
request.setRequestHeader("X-Token", "9NdOCAl73S6ut7Lj7Fz0KVV5AcujnOb2BBV4kCxeGwM");
},
contentType: "application/json; charset=utf-8",
success: function(message) {
console.log("success" + message);
},
error: function(message) {
console.log("error" + message);
}
});
});
});

使用原生js发送ajax请求,下载文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function btnDownload() {
let url = "http://192.168.0.105:8080/download/file";
let xhr = new XMLHttpRequest();
xhr.open('get', url, true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // 设置请求头,必须在open后添加
xhr.setRequestHeader("X-Token", "9NdOCAl73S6ut7Lj7Fz0KVV5AcujnOb2BBV4kCxeGwM");
xhr.responseType = 'blob'; // 返回类型blob blob 存储着大量的二进制数据
xhr.onload = function() {
if (this.status === 200) {
console.log("ok");
let blob = new Blob([this.response]); // 转成文本存储
//let name = xhr.getResponseHeader('content-disposition'); //禁止使用
let a = document.createElement('a'); // 转换完成,创建一个a标签用于下载
a.download = 'file.zip';
a.href = window.URL.createObjectURL(blob); // 转成本地连接到blob文本
a.click();
a.remove();
} else {
console.log("error");
}
}
xhr.send();
};