使用Ajax提交form表單不跳轉是一種常見的網頁開發技術，它允許用戶在不刷新整個頁面的情況下，向服務器提交表單數據并獲取服務器返回的數據。這種技術不僅可以提升用戶體驗，還能降低服務器負載。下面以一個簡單的登錄表單為例，詳細介紹了如何使用Ajax提交form表單不跳轉的過程。 首先，我們需要在HTML中創建一個登錄表單，包含用戶名和密碼兩個輸入框以及一個提交按鈕。代碼如下：

html
<form id="loginForm">
<label for="username">用戶名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密碼：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登錄">
</form>
</p>
接下來，我們需要使用JavaScript編寫Ajax提交表單的代碼。首先，我們需要監聽表單的提交事件，并阻止默認的表單提交行為。然后，我們使用JavaScript內置的XMLHttpRequest對象創建一個Ajax請求，并通過POST方法將表單數據發送給服務器。代碼如下：
<p>

javascript document.getElementById("loginForm").addEventListener("submit", function(event) { event.preventDefault(); // 阻止表單默認提交行為 var username = document.getElementById("username").value; var password = document.getElementById("password").value; var xhr = new XMLHttpRequest(); xhr.open("POST", "login.php", true); // 指定服務器端處理腳本的URL xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { var response = JSON.parse(xhr.responseText); // 處理服務器返回的數據 } }; xhr.send("username=" + encodeURIComponent(username) + "&password=" + encodeURIComponent(password)); });

在代碼中，我們首先獲取用戶名和密碼的值，并使用XMLHttpRequest對象創建一個Ajax請求。然后，我們使用open方法指定了服務器端處理腳本的URL。這個URL可能是一個PHP、Java或其他后端程序的URL，用于接收并處理表單提交的數據。將數據發送到服務器時，我們需要使用encodeURIComponent方法對用戶名和密碼進行編碼，確保數據能夠正確傳輸。 當Ajax請求的狀態發生變化時，我們通過onreadystatechange事件監聽函數獲取服務器返回的數據。在這個例子中，我們使用JSON.parse方法將服務器返回的JSON格式數據解析為JavaScript對象，并可以根據返回的數據進行相應的處理，例如顯示登錄成功或失敗的提示信息等。 最后，在服務器端處理腳本中，我們可以接收到通過Ajax提交的表單數據，并進行相應的處理和驗證。處理完畢后，可以將處理結果以JSON格式返回給客戶端。 總結來說，使用Ajax提交form表單不跳轉是一種方便高效的網頁開發技術。通過監聽表單的提交事件，使用XMLHttpRequest對象發送表單數據，并獲取服務器的響應結果，可以實現在不刷新整個頁面的情況下，完成對表單數據的提交和處理。這種技術不僅提升了用戶體驗，還降低了服務器的負載，是現代網頁開發中常用的技術之一。