首先，讓我們來(lái)看一個(gè)簡(jiǎn)單的例子。假設(shè)我們有一個(gè)表單，用戶可以通過(guò)提交表單來(lái)向服務(wù)器發(fā)送POST請(qǐng)求。我們希望在請(qǐng)求發(fā)送后，能夠獲取到狀態(tài)碼，以便進(jìn)行進(jìn)一步的處理。以下是一個(gè)簡(jiǎn)單的HTML表單代碼：
<form id="myForm" method="POST" action="/submit">
<input type="text" name="username" placeholder="Username" />
<input type="password" name="password" placeholder="Password" />
<button type="submit">Submit</button>
</form>在上面的代碼中，我們定義了一個(gè)ID為"myForm"的表單，并設(shè)置了表單的提交方式為POST，并指定了請(qǐng)求的URL為"/submit"。當(dāng)用戶點(diǎn)擊提交按鈕時(shí)，表單將會(huì)發(fā)送POST請(qǐng)求到服務(wù)器。
接下來(lái)，我們將使用AJAX來(lái)獲取POST請(qǐng)求的狀態(tài)碼。在javascript中，我們可以使用XMLHttpRequest對(duì)象來(lái)發(fā)送AJAX請(qǐng)求，并且通過(guò)監(jiān)聽(tīng)其"readystatechange"事件來(lái)獲取請(qǐng)求的狀態(tài)。以下是一個(gè)基本的示例代碼：
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onreadystatechange = function() {
if(xhr.readyState === 4) {
console.log(xhr.status);
}
};
xhr.send();在上面的代碼中，我們首先創(chuàng)建了一個(gè)XMLHttpRequest對(duì)象，并使用"open"方法來(lái)設(shè)置請(qǐng)求方式為POST，并指定了請(qǐng)求的URL為"/submit"。然后，我們通過(guò)監(jiān)聽(tīng)"readystatechange"事件來(lái)獲取請(qǐng)求的狀態(tài)。當(dāng)請(qǐng)求的狀態(tài)變?yōu)?時(shí)，我們可以通過(guò)"xhr.status"來(lái)獲取到狀態(tài)碼。
為了更好地理解上述代碼的工作原理，我們可以通過(guò)一個(gè)具體的例子來(lái)進(jìn)行說(shuō)明。假設(shè)我們的服務(wù)器在接收到POST請(qǐng)求后，會(huì)返回一個(gè)狀態(tài)碼。我們可以根據(jù)該狀態(tài)碼來(lái)做出相應(yīng)的處理。以下是一個(gè)示例的服務(wù)器端代碼：
app.post('/submit', function(req, res) {
// 處理請(qǐng)求的邏輯...
// 假設(shè)請(qǐng)求成功，并返回狀態(tài)碼200
res.status(200).send("Request succeeded!");
});在上面的代碼中，我們使用了一個(gè)簡(jiǎn)單的Node.js的express框架來(lái)創(chuàng)建了一個(gè)路由，當(dāng)接收到"/submit"的POST請(qǐng)求時(shí)，服務(wù)器會(huì)返回一個(gè)狀態(tài)碼為200，并返回"Request succeeded!"的消息。
當(dāng)我們?cè)谇岸耸褂肁JAX發(fā)送POST請(qǐng)求時(shí)，在請(qǐng)求成功后，通過(guò)獲取狀態(tài)碼可以判斷請(qǐng)求是否成功。如果狀態(tài)碼等于200，即可進(jìn)行相應(yīng)的處理。以下是一個(gè)完整的前端示例代碼：
document.getElementById("myForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表單的默認(rèn)提交行為
var xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log("Request succeeded!");
} else {
console.log("Request failed! Status code: " + xhr.status);
}
}
};
xhr.send();
});在上面的代碼中，我們使用addEventListener方法來(lái)給表單的submit事件綁定了一個(gè)回調(diào)函數(shù)。在回調(diào)函數(shù)中，我們首先通過(guò)preventDefault方法來(lái)阻止了表單的默認(rèn)提交行為，然后通過(guò)XMLHttpRequest對(duì)象發(fā)送了POST請(qǐng)求。在接收到請(qǐng)求的狀態(tài)變?yōu)?時(shí)，我們通過(guò)判斷狀態(tài)碼是否等于200來(lái)分別打印出成功和失敗的信息。
總結(jié)來(lái)說(shuō)，通過(guò)使用AJAX獲取POST請(qǐng)求的狀態(tài)碼，我們可以輕松判斷請(qǐng)求是否成功，從而進(jìn)行相應(yīng)的處理。無(wú)論是向服務(wù)器發(fā)送POST請(qǐng)求還是接收服務(wù)器返回的POST請(qǐng)求結(jié)果，都能夠通過(guò)獲取狀態(tài)碼來(lái)進(jìn)行判斷和處理。通過(guò)舉例說(shuō)明，我們希望讀者能夠更好地理解并運(yùn)用AJAX獲取POST請(qǐng)求狀態(tài)碼的方法。