在一个视图中处理两个表单,可以通过以下几个步骤实现:
以下是一个简单的示例代码:
<form name="form1" onsubmit="submitForm(event, 'form1')">
<input type="text" name="input1" />
<input type="submit" value="Submit Form 1" />
</form>
<form name="form2" onsubmit="submitForm(event, 'form2')">
<input type="text" name="input2" />
<input type="submit" value="Submit Form 2" />
</form><script>
function submitForm(event, formName) {
event.preventDefault(); // 阻止默认的表单提交行为
// 获取表单数据
const formData = new FormData(event.target);
// 发送表单数据到服务器
fetch('/submit', {
method: 'POST',
body: formData,
headers: {
'X-Form-Name': formName, // 添加表单名称到请求头
},
})
.then((response) => response.json())
.then((data) => {
console.log(data);
});
}
</script>
在服务器端,可以根据请求头中的 X-Form-Name
字段来区分这两个表单,并对它们进行相应的处理。
推荐的腾讯云相关产品:
优势:
应用场景:
推荐的产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云