Ajax 的基本使用（GET、POST请求）
海边的小溪鱼 2022-07-14 jQueryHTTP
Ajax 的基本使用（基于 jQuery 中的 Ajax 发起请求）
URL地址的组成部分：通信协议、服务器名称、存放位置
URL: http://www.xxx.com/index.html
通信协议(http/https)：客户端与服务器之间的通信协议
服务器名称(www.xxx.com)：存有该资源的服务器名称
存放位置(/index.html)：资源在服务器上具体的存放位置
客户端与服务器的通信过程：请求 ==> 处理 ==> 响应
请求：客户端请求服务器
处理：服务器处理这次请求
响应：服务器响应客户端
常见的请求方式
get 请求：通常用于获取服务端资源
post 请求： 通常用于向服务器提交数据
注意：客户端请求服务器时，请求的方式有很多，get 和 post 请求较为常见
Ajax 的概念及应用场景
什么是 Ajax：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax
作用：Ajax 能够轻松实现网页与服务器之间的数据交互（如数据的增删改查）
浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 JQuery 对它进行了封装，提供了一系列 Ajax 相关的函数，极大的降低了 Ajax 的使用难度。
# 基于 jQuery 中的 Ajax 发起请求
JQuery 中发起 Ajax 请求最常用的三个方法：$.get() $.post() $.ajax()
<html>
<head>
<title>使用 $.get() 和 $.post() 发起请求</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn-get">发起GET请求</button>
<button id="btn-post">发起POST请求</button>
<script>
$(function () {
const url = "http://www.liulongbin.top:3006/api/getbooks"
// 发起 GET 请求
$("#btn-get").on("click", function() {
// $.get("请求地址", 参数, 成功时的回调函数)
$.get(url, { id: 1 }, function(res) {
console.log(res); // 请求到的数据
})
})
// 发起 POST 请求
const url1 = "http://www.liulongbin.top:3006/api/addbook"
const obj = {
bookname: "水浒传", author: "施耐庵", publisher: "天津出版社"
}
$("#btn-post").on("click", function () {
// $.post("请求地址", 参数, 成功时的回调函数)
$.post(url1, obj, function (res) {
console.log(res); // 请求到的数据
})
})
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
<head>
<title>使用 $.ajax() 发起请求</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<button id="btn">发起请求</button>
<script>
$(function () {
const url = "http://www.liulongbin.top:3006/api/getbooks"
// 发起请求
$("#btn").on("click", function () {
$.ajax({
type: "get", // 请求方式
url: url, // 请求地址
data: { id: 1 }, // 携带参数
success: function(res) {
// 成功时的回调
console.log(res);
}
})
})
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 通过 Ajax 提交表单数据
<html>
<head>
<title>通过 Ajax 提交表单数据</title>
<script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
<form action="/login" id="f1">
<input type="text" name="username" />
<input type="password" name="password" />
<button type="submit">提交</button>
</form>
<script>
/*
1. 监听表单提交事件的两种方式：
(1). $("#f1").submit(function(){})
(2). $("#f1").on("submit", function(){})
2. 阻止表单提交的默认行为：e.preventDefault()
3. serialize() 函数：可以一次性获取到表单中所有的数据
语法: $("f1").serialize()
注意: 必须为每个表单元素添加 name 属性
*/
$(function () {
// 监听表单的提交事件
$("#f1").submit(function(e) {
// 阻止表单提交的默认行为
e.preventDefault()
// serialize() 方法：获取表单中所有的数据
var data = $(this).serialize()
console.log(data); // username=123&password=456
})
})
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37