AJAX（Asynchronous JavaScript and XML）是一種常用的前端技術，它可以實現網頁實時更新，提高用戶體驗。當涉及到需要同時提交兩個表單的情況時，我們可以利用AJAX來實現這一功能。

假設我們有一個電商網站，用戶可以同時修改收貨地址和發票地址。當用戶點擊“保存”按鈕時，我們需要將這兩個表單的數據同時提交到后端進行保存。使用AJAX，我們可以通過一次點擊“保存”按鈕，同時將這兩個表單的數據異步發送給服務器端，提高用戶的操作效率。

下面是一個使用AJAX提交兩個表單的簡單示例：

// HTML代碼
<form id="shipping-address-form">
<h2>收貨地址</h2>
<label for="shipping-address">地址：</label>
<input type="text" id="shipping-address" name="shippingAddress">
<button id="save-shipping-address-btn">保存收貨地址</button>
</form>
<form id="invoice-address-form">
<h2>發票地址</h2>
<label for="invoice-address">地址：</label>
<input type="text" id="invoice-address" name="invoiceAddress">
<button id="save-invoice-address-btn">保存發票地址</button>
</form>
// JavaScript代碼
document.getElementById("save-shipping-address-btn").addEventListener("click", function(event) {
event.preventDefault(); // 阻止表單默認提交
var shippingAddress = document.getElementById("shipping-address").value;
var invoiceAddress = document.getElementById("invoice-address").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "save-address.php", true); // 異步發送POST請求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 更新頁面上的提示信息
}
};
xhr.send("shippingAddress=" + encodeURIComponent(shippingAddress) + "&invoiceAddress=" + encodeURIComponent(invoiceAddress));
});
document.getElementById("save-invoice-address-btn").addEventListener("click", function(event) {
event.preventDefault(); // 阻止表單默認提交
var shippingAddress = document.getElementById("shipping-address").value;
var invoiceAddress = document.getElementById("invoice-address").value;
var xhr = new XMLHttpRequest();
xhr.open("POST", "save-address.php", true); // 異步發送POST請求
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 更新頁面上的提示信息
}
};
xhr.send("shippingAddress=" + encodeURIComponent(shippingAddress) + "&invoiceAddress=" + encodeURIComponent(invoiceAddress));
});

在這個示例中，我們分別給收貨地址表單和發票地址表單的“保存”按鈕添加了click事件監聽器，在點擊按鈕時調用相應的回調函數。

回調函數中，我們首先調用event.preventDefault()來阻止表單的默認提交行為，然后獲取兩個表單輸入框的值。接下來，我們創建一個XMLHttpRequest對象，指定請求的方法和URL，將數據以POST方式發送到服務器端。

在服務器端，我們可以使用后端技術（如PHP）來接收并保存這兩個表單的數據。這里我們假設后端代碼為save-address.php。

<?php
$shippingAddress = $_POST["shippingAddress"];
$invoiceAddress = $_POST["invoiceAddress"];
// 在這里進行保存地址的邏輯處理
echo "地址保存成功！";
?>

最后，我們在回調函數的最后更新頁面上的提示信息，并通過console.log打印出服務器返回的響應文本。你可以根據實際需要在這個示例的基礎上進行修改和擴展。

總結起來，使用AJAX提交兩個表單的步驟包括：

1. 給每個表單的提交按鈕添加click事件監聽器。
2. 在回調函數中阻止表單的默認提交行為，獲取表單數據。
3. 創建XMLHttpRequest對象，指定請求的方法和URL。
4. 將表單數據作為POST請求的參數發送到服務器端。
5. 在服務器端接收并處理表單數據。
6. 更新頁面上的提示信息。

通過以上步驟，我們可以實現同時提交兩個表單的功能，提高用戶操作的效率和體驗。