发送数据：基础
????????向服务器发送数据通常是通过 HTTP 的 post 方法完成的。在这种情况下，请求正文包含要发发送的数据。数据格式取决于服务器的期望。它可以是：
- 键值对，例如直接提交表单时。
- Json 格式：可以用于更多结构化数据。
将表单数据发送到服务器
???????? 如果 Web 服务器需要直接的表单数据，您可以使用 JavaScript 的 FormData 对象来封装要发送的信息。下面是一个示例的表单，用于选择最强壮的动物以及处理表单提交的JS代码。
<html>
<head>
</head>
<body>
<h2>Which one is the strongest?</h2>
<form>
<p>
<input type="radio" name="strongest" id="elephant" value="ELE" checked>
<label for="elephant">The elephant</label>
<br>
<input type="radio" name="strongest" id="rhinoceros" value="RHI">
<label for="rhinoceros">The rhinoceros</label>
<br>
<input type="radio" name="strongest" id="hippopotamus" value="HIP">
<label for="hippopotamus">The hippopotamus</label>
<br>
</p>
<p>
<label for="name">Your name</label>:
<input type="text" name="name" id="name" required>
</p>
<input type="submit" value="Vote">
</form>
<p id="result"></p>
</body>
</html>// Handle form submission
document.querySelector("form").addEventListener("submit", e => {
// Cancel default behavior of sending a synchronous POST request
e.preventDefault();
// Create a FormData object, passing the form as a parameter
const formData = new FormData(e.target);
// Send form data to the server with an asynchronous POST request
fetch("https://thejsway-server.herokuapp.com/animals", {
method: "POST",
body: formData
})
.then(response => response.text())
.then(result => {
document.getElementById("result").textContent = result;
})
.catch(err => {
console.error(err.message);
});
});页面显示：
???????? 事件监听器首先禁用默认的表单提交行为，即向 POST 服务器发送同步 HTTP 请求。相反，FormData 对象是用表单本身（e.target表达式）作为参数来创建的。所有表单字段都会自动添加为该对象中的键值对。
??????? 一旦表单字段封装在 FormData 对象中，就会使用前面看到的 fetch() 方法向https://thejswayserver发送异步请求。fetch() 调用的第二个参数将HTTP方法设置为 POST 并将表单数据添加到请求的正文中。
??????? 最后，当服务器响应异步请求时，页面的 result 元素会更新。
??????? 该FormData 对象也可以独立于任何形式使用，将自定义键值对发送到服务器。这是一个非常基本的表单示例，仅包含一个按钮。
??????? 当用户点击按钮时，自定义数据被添加到 FromData 对象中，并通过异步 POST请求发送到服务器。
<html>
<head>
</head>
<body>
<button id="buyButton">Buy a new t-shirt</button>
<p id="result"></p>
</body>
</html>document.getElementById("buyButton").addEventListener("click", () => {
// Create a new, empty FormData object
const formData = new FormData();
// Fill the object with key/value pairs
formData.append("size", "L");
formData.append("color", "blue");
// Send data to the server
fetch("https://thejsway-server.herokuapp.com/tshirt", {
method: "POST",
body: formData
})
.then(response => response.text())
.then(result => {
document.getElementById("result").textContent = result;
})
.catch(err => {
console.error(err.message);
});
});将Json数据发送到服务器
????????
// Create an array containing two objects
const cars = [
{
model: "Peugeot",
color: "blue",
registration: 2012,
checkups: [2015, 2017]
},
{
model: "Citro?n",
color: "white",
registration: 1999,
checkups: [2003, 2005, 2007, 2009, 2011, 2013]
}
];
// Send this array as JSON data to the server
fetch("https://thejsway-server.herokuapp.com/api/cars", {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(cars)
})
.then(response => response.text())
.then(result => {
console.log(result);
})
.catch(err => {
console.error(err.message);
});输出结果：
???????? fetch() 调用的第二个参数设置为要使用的HTTP方法 POST，更新请求标头以指示数据格式为JSON，并将JavaScript 数据的 JSON表示添加到请求体中。