Ajax 简明教程
AJAX - Send POST Requests
POST 请求将数据从网页发送到 Web 服务器。在此请求中，数据以与 URL 分离的请求正文形式发送。您无法缓存和书签 POST 请求。此外，使用 POST 请求，您可以获得任何长度的数据。
Syntax
open('POST', url, true)此方法需要三个参数，它们是：
-
POST − 它用于向 Web 服务器发送数据。
-
url - 它表示将在 Web 服务器上打开的文件 URL。
-
true - 对于异步连接，将此参数的值设置为 true。或者，对于同步连接，将值设置为 false。此参数的默认值为 true。
How to use POST Request
要使用 POST 请求，我们需要执行以下步骤：
Step 1 − 创建 XMLHttpRequest 对象。
var variableName = new XMLHttpRequest()Step 2 − 创建 XMLHttpRequest 对象后，我们现在必须定义一个回调函数，该函数将在从 Web 服务器得到响应后触发。
XMLHttpRequestObjectName.onreadystatechange = function(){
// Callback function body
}Step 3 − 现在我们使用 open() 函数。在 open() 函数中，我们传入一个 POST 请求以及要向其发送数据的 URL。
XMLHttpRequestObjectName.open("POST", url, async)
XMLHttpRequestObjectName.setRequestHeader('Content-type', 'application/json')Step 4 − 使用 setRequestHeader() 设置 HTTP 标头请求。它总是先调用 open() 方法后调用 send() 方法。这里内容类型标头设置为“application/json”，表示要以 JSON 格式发送数据。
Step 5 − 最后，我们使用 stringify() 方法将 JSON 数据转换为字符串，然后使用 send() 方法将其发送到 Web 服务器。
XMLHttpRequestObjectName.send(JSON.stringify(JSONdata))以下流程图将显示下方代码的工作原理 −
Example
<!DOCTYPE html>
<html>
<body>
<script>
function sendRecords() {
// Creating XMLHttpRequest object
var zhttp = new XMLHttpRequest();
// JSON document
const mParameters = {
title: document.querySelector('#Utitle').value,
userid: document.querySelector('#UId').value,
body: document.querySelector('#Ubody').value
}
// Creating call back function
zhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 201) {
document.getElementById("example").innerHTML = this.responseText;
console.log("Data Posted Successfully")
}
console.log("Error found")
};
// Post/Add JSON document on the given API
zhttp.open("POST", "https://jsonplaceholder.typicode.com/todos", true);
// Setting HTTP request header
zhttp.setRequestHeader('Content-type', 'application/json')
// Sending the request to the server
zhttp.send(JSON.stringify(mParameters));
}
</script>
<!--Creating simple form-->
<h2>Enter data</h2>
<label for="Utitle">Title</label>
<input id="Utitle" type="text" name="title"><br>
<label for="UId">UserId</label>
<input id="UId" type="number" name="UserID"><br>
<label for="Ubody">Body</label>
<input id="Ubody" type="text" name="body"><br>
<button type="button" onclick="sendRecords()">Submit</button>
<div id="example"></div>
</body>
</html>
使用 HTTP POST 方法和服务器的 URL 初始化请求，即 "https://jsonplaceholder.typicode.com/todos" 。然后我们调用 setRequestHeader() 方法来将请求的内容类型设置为 JSON。在那之后，我们调用 send() 函数以字符串形式向服务器发送请求和 JSON 文档。
因此，当服务器对请求做出响应时，“onreadystatechange”属性使用 XMLHttpRequest 对象的当前状态调用回调函数。如果“准备状态”属性设置为 4（这意味着请求已完成）并且“状态”属性设置为 201（这意味着服务器已成功创建新资源），则从“responseText”属性中提取响应数据，并借助示例元素的“innerHTML”属性显示 HTML 文档。
此处使用 JSON.stringify() 方法将 JSON 文档转换为字符串。这是必需的，因为 XHR 请求只能发送文本数据。