在两个HTML页面之间传输表单数据,可以通过以下几种方式实现:
window.location.href
进行页面跳转。示例代码:
document.getElementById("submitBtn").addEventListener("click", function() {
var name = document.getElementById("nameInput").value;
var email = document.getElementById("emailInput").value;
var url = "pageB.html?name=" + encodeURIComponent(name) + "&email=" + encodeURIComponent(email);
window.location.href = url;
});
在页面B中,可以使用JavaScript获取URL参数,并将其填充到相应的表单字段中。
action
属性为目标页面B的URL,设置method
属性为POST
,然后在目标页面B的服务器端进行表单数据的处理,并返回处理结果。示例代码(页面A的表单):
<form action="pageB.html" method="POST">
<input type="text" name="name" placeholder="姓名">
<input type="email" name="email" placeholder="邮箱">
<input type="submit" value="提交">
</form>
示例代码(页面B的服务器端处理,使用Node.js和Express框架):
const express = require('express');
const app = express();
app.use(express.urlencoded({ extended: true }));
app.post('/pageB.html', (req, res) => {
const name = req.body.name;
const email = req.body.email;
// 处理表单数据
// ...
// 返回处理结果
res.send('处理结果');
});
app.listen(3000, () => {
console.log('服务器已启动');
});
示例代码(页面A的表单提交事件):
document.getElementById("submitBtn").addEventListener("click", function() {
var name = document.getElementById("nameInput").value;
var email = document.getElementById("emailInput").value;
localStorage.setItem("name", name);
localStorage.setItem("email", email);
});
示例代码(页面B的加载事件):
window.addEventListener("load", function() {
var name = localStorage.getItem("name");
var email = localStorage.getItem("email");
document.getElementById("nameInput").value = name;
document.getElementById("emailInput").value = email;
});
这些方法可以根据具体的需求和场景选择使用,它们都可以在两个HTML页面之间传输表单数据。
领取专属 10元无门槛券
手把手带您无忧上云