一个按钮分别提交两份不同的表单到两个不同的服务器路径
时间: 2024-02-09 20:10:20 浏览: 74
您可以使用JavaScript和XMLHttpRequest对象来实现此操作。您可以创建两个表单元素,每个表单元素都有自己的action属性和method属性。然后,您可以为每个表单元素添加一个submit事件监听器,并在事件处理程序中使用XMLHttpRequest对象将表单数据发送到服务器路径。
以下是一个示例代码片段:
```html
<form id="form1" action="/server1" method="POST">
<!-- 表单1的输入字段 -->
<input type="text" name="input1">
<input type="submit" value="提交表单1">
</form>
<form id="form2" action="/server2" method="POST">
<!-- 表单2的输入字段 -->
<input type="text" name="input2">
<input type="submit" value="提交表单2">
</form>
<script>
// 表单1提交事件处理程序
document.getElementById("form1").addEventListener("submit", function(event) {
event.preventDefault(); // 防止表单提交
const formData = new FormData(event.target); // 获取表单数据
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("POST", event.target.action); // 设置请求方法和服务器路径
xhr.send(formData); // 发送表单数据
});
// 表单2提交事件处理程序
document.getElementById("form2").addEventListener("submit", function(event) {
event.preventDefault(); // 防止表单提交
const formData = new FormData(event.target); // 获取表单数据
const xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
xhr.open("POST", event.target.action); // 设置请求方法和服务器路径
xhr.send(formData); // 发送表单数据
});
</script>
```
请注意,此示例假设两个服务器路径都支持POST请求,并且表单数据以相同的方式处理。如果需要,您可以根据服务器的要求更改请求方法和数据格式。
阅读全文