Ajax 提交 Form 如何重定向？
在實際的項目開發(fā)中，經(jīng)常會遇到需要使用 Ajax 提交 Form 表單數(shù)據(jù)的場景。但是由于 Ajax 的特性，它不能像傳統(tǒng)的表單提交一樣通過重定向頁面來展示結(jié)果。本文將介紹如何在使用 Ajax 提交 Form 表單時進行重定向，并通過舉例說明具體的做法。
在傳統(tǒng)的表單提交中，我們一般會在服務(wù)器端通過處理表單數(shù)據(jù)后，將用戶重定向到另一個頁面，以展示提交結(jié)果。例如，假設(shè)我們有一個注冊頁面，用戶填寫完表單后，點擊提交按鈕，服務(wù)器端處理數(shù)據(jù)，然后將用戶重定向到一個注冊成功頁面。這樣用戶就能清晰地知道自己的操作是否成功，并能簡單地返回到之前的頁面。
然而，在使用 Ajax 提交 Form 表單時，我們無法像傳統(tǒng)表單提交那樣直接使用重定向。因為 Ajax 是通過 JavaScript 發(fā)送異步請求，并在不刷新頁面的情況下更新部分頁面內(nèi)容的技術(shù)。因此，當使用 Ajax 提交 Form 表單后，不會有頁面的刷新，用戶也不會被重定向到新的頁面。那么，如何在 Ajax 提交 Form 的情況下實現(xiàn)重定向呢？
一種常用的方法是在服務(wù)器端返回一個特定的 JSON 格式數(shù)據(jù)，用于指示請求的處理結(jié)果。然后在客戶端根據(jù)這個結(jié)果進行相應(yīng)的處理，如重定向到指定頁面。下面我們通過一個具體的案例來說明這個方法。
假設(shè)我們有一個表單頁面，用戶可以輸入用戶名和密碼，然后通過 Ajax 提交表單數(shù)據(jù)給服務(wù)器端進行驗證。如果驗證成功，服務(wù)器端返回一個 JSON 格式的數(shù)據(jù)，包含一個指示請求是否成功的字段以及一個重定向的 URL。如果驗證失敗，服務(wù)器端同樣返回一個 JSON 格式的數(shù)據(jù)，包含一個錯誤提示信息。
首先，我們在 HTML 中定義一個 Form 表單，并添加一個 Ajax 提交的事件監(jiān)聽器：

html
<form id="loginForm">
<input type="text" id="username" name="username" placeholder="用戶名">
<input type="password" id="password" name="password" placeholder="密碼">
<button type="submit">登錄</button>
</form>
<script>
document.getElementById('loginForm').addEventListener('submit', function (event) {
event.preventDefault(); // 阻止表單的默認提交行為
var formData = new FormData(document.getElementById('loginForm'));
var xhr = new XMLHttpRequest();
xhr.open('POST', '/login');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
var response = JSON.parse(xhr.responseText);
if (response.success) {
window.location.href = response.redirectUrl;
} else {
alert(response.errorMsg);
}
}
};
xhr.send(formData);
});
</script>

在服務(wù)器端，我們需要處理登錄請求，并根據(jù)驗證結(jié)果返回相應(yīng)的 JSON 數(shù)據(jù)。以下是一個基于 Node.js 和 Express 的簡單示例：

javascript
app.post('/login', function (req, res) {
var username = req.body.username;
var password = req.body.password;
// 在這里進行驗證，驗證成功則返回重定向的 URL，驗證失敗返回錯誤提示信息
if (username === 'admin' && password === '123456') {
res.json({ success: true, redirectUrl: '/success' });
} else {
res.json({ success: false, errorMsg: '用戶名或密碼錯誤' });
}
});

在上述例子中，當用戶填寫表單并點擊提交按鈕時，通過 Ajax 提交表單數(shù)據(jù)給服務(wù)器端的 /login 路由進行驗證。如果驗證成功，服務(wù)器端返回的 JSON 數(shù)據(jù)中包含了一個 success 字段為 true，以及一個重定向的 URL。在客戶端，我們根據(jù)這個 success 字段進行判斷，如果為 true，則將頁面重定向到指定的 URL，否則彈出錯誤提示信息。
通過以上示例，我們可以看到如何在使用 Ajax 提交 Form 表單時進行重定向。通過在服務(wù)器端返回 JSON 格式數(shù)據(jù)，并在客戶端根據(jù)這些數(shù)據(jù)進行相應(yīng)的操作，我們可以實現(xiàn)在 Ajax 提交 Form 表單時的重定向效果。這樣用戶就依然可以清晰地知道自己的操作是否成功，并能簡單地返回到之前的頁面。