1,在浏览器开发者工具看到的载荷长什么样子?
(1)json格式的请求体(载荷):{"title":"aaaa","type":1,"account":300,"remarks":"ccccc"}
(2)url编码格式的请求体(载荷):name=Alice&age=30&email=alice%40example.com
(3)还有form-data格式的请求体,它的请求体和请求头如下图所示。知道长什么样就行了,本篇文章不再讨论form-data格式的请求体了
另外,还有一个Query String 格式,它和url编码格式非常相似,区别就是URL 编码格式对特殊字符和非 ASCII 字符进行了编码,确保它们在 URL 中的正确传输和解析。
以下是五个示例,分别给出了 Query String 格式和 URL 编码格式:
示例一:
Query String 格式:param1=value1¶m2=value2
URL 编码格式:param1=value1¶m2=value2
示例二:
Query String 格式:name=John Doe&age=30
URL 编码格式:name=John%20Doe&age=30
2,请求头是什么样子?
json格式的请求头:Content-Type: application/json
url编码格式的请求头:Content-Type:application/x-www-form-urlencoded
3,在html代码中怎样发出这两种格式的请求体?
(3.1)json格式的请求,不能通过html的form表单标签发出,一般是通过Ajax通信(包括XMLHttpRequest 和 Fetch API )
<!--基于XMLHttpRequest发送json请求体 -->
<!DOCTYPE html>
<html>
<head>
<title>Submit JSON Request</title>
</head>
<body>
<script>
// 创建一个 JSON 对象
var data = {
title: 'aaaa',
time: '2023-07-09',
type: 1,
account: 300,
remarks: 'ccccc'
};
// 将 JSON 对象转换为字符串
var jsonData = JSON.stringify(data);
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://127.0.0.1:3000/account', true);
xhr.setRequestHeader('Content-Type', 'application/json');
// 发送请求
xhr.send(jsonData);
</script>
</body>
</html>
<!--基于Fetch API发送json请求体 -->
<!DOCTYPE html>
<html>
<head>
<title>Ajax JSON 请求示例</title>
<script>
function submitData() {
var data = {
name: "Alice",
age: 30,
email: "alice@example.com"
};
var jsonData = JSON.stringify(data);
fetch("http://127.0.0.1:3000/account", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: jsonData
})
.then(response => response.json())
.then(data => {
console.log(data);
// 处理成功响应
})
.catch(error => {
console.error(error);
// 处理错误情况
});
}
</script>
</head>
<body>
<button onclick="submitData()">提交数据</button>
</body>
</html>
(3.2)url编码格式的请求,可以通过form表单标签发出,也可以通过Ajax通信(包括XMLHttpRequest 和 Fetch API )发出。
<!--通过form标签发送url编码格式的请求 -->
<!DOCTYPE html>
<html>
<head>
<title>Submit Form Example</title>
</head>
<body>
<form action="http://127.0.0.1:3000/account" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="age">Age:</label>
<input type="number" id="age" name="age" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!--通过XMLHttpRequest发送url编码格式的请求 -->
<!DOCTYPE html>
<html>
<head>
<title>XMLHttpRequest URL Encoded Request</title>
<script>
function sendRequest() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:3000/endpoint");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
var data = "param1=" + encodeURIComponent("value1") + "¶m2=" + encodeURIComponent("value2");
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
console.log(xhr.responseText);
// 处理成功响应
} else {
console.error(xhr.statusText);
// 处理错误情况
}
};
xhr.send(data);
}
</script>
</head>
<body>
<button onclick="sendRequest()">Send Request</button>
</body>
</html>
<!--通过Fetch API发送url编码格式的请求 -->
<!DOCTYPE html>
<html>
<head>
<title>Fetch API URL Encoded Request</title>
<script>
function sendRequest() {
var url = "http://127.0.0.1:3000/endpoint";
var data = {
param1: "value1",
param2: "value2"
};
var encodedData = new URLSearchParams(data).toString();
fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/x-www-form-urlencoded"
},
body: encodedData
})
.then(function(response) {
if (response.ok) {
return response.text();
} else {
throw new Error(response.statusText);
}
})
.then(function(result) {
console.log(result);
// 处理成功响应
})
.catch(function(error) {
console.error(error);
// 处理错误情况
});
}
</script>
</head>
<body>
<button onclick="sendRequest()">Send Request</button>
</body>
</html>
4,后端express解析请求体使用的中间件
app.use(express.json()); //解析json格式的请求体的中间件
app.use(express.urlencoded({ extended: false })); //解析url编码格式的请求体的中间件
另外,两种格式的请求体都可以使用formidable模块解析