ajax 提交两个表单提交吗

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提交两个表单的步骤包括：

给每个表单的提交按钮添加click事件监听器。
在回调函数中阻止表单的默认提交行为，获取表单数据。
创建XMLHttpRequest对象，指定请求的方法和URL。
将表单数据作为POST请求的参数发送到服务器端。
在服务器端接收并处理表单数据。
更新页面上的提示信息。

通过以上步骤，我们可以实现同时提交两个表单的功能，提高用户操作的效率和体验。