我想在html中将数据从一个页面传输到下一页,而不使用任何数据库。我想在第一页上填写的下一页显示数据,如用户详细信息/用户配置文件信息。
答案 0 :(得分:1)
您可以通过多种方式在JavaScript中执行此类操作。两种主要技术如下。
单页应用。 这是一个导航实际上不会完整加载页面的应用程序,但新的"页面"通过ajax拉入或通过javascript生成。构建它们的框架很多,但React和Preact是我的最爱。
将变量存储在localStorage
或sessionStorage
中,并使用javascript更新html中的正确位置。
答案 1 :(得分:0)
您可以通过添加到网址的参数将数据从一个页面传递到另一个页面。所以,假设你正在收集" name"和"年龄"在一个页面上,第二页的网址是" http://example.com/second.html"然后当您对参数进行编码时,网址变为" http://example.com/second.html?name=Brian&age=21"。
在您的第一页上创建表单并定位表单中的第二页,表单的操作必须是" get"这是默认设置,因此您无需指定它。如下所示:
<form action="second.html">
<p>Name: <input type="text" size="20" name="name"></p>
<p>Age: <input type="text" size="3" name="age"></p>
</form>
然后,您可以在第二页上通过JavaScript访问这些参数。
有一个非常简单的页面可以在这里展示这个想法:http://www.cryer.co.uk/resources/javascript/script8.htm
页面用于访问每个参数值的JavaScript是:
<script type="text/javascript">
function GetParam(name)
{
var start=location.search.indexOf("?"+name+"=");
if (start<0) start=location.search.indexOf("&"+name+"=");
if (start<0) return '';
start += name.length+2;
var end=location.search.indexOf("&",start)-1;
if (end<0) end=location.search.length;
var result='';
for(var i=start;i<=end;i++) {
var c=location.search.charAt(i);
result=result+(c=='+'?' ':c);
}
return unescape(result);
}
</script>
使用您想要的参数名称调用该函数。
答案 2 :(得分:0)
使用 EJS 库可以轻松完成。你必须安装 npm、node.js 和 express 才能使用这个库。
这里是下载过程的链接。 https://phoenixnap.com/kb/install-node-js-npm-on-windows
下载后,您必须在命令提示符下键入 npm install ejs
,并在相同的层次结构中创建一个名为 views 的目录,并在 views 目录中创建一个可以用作 HTML 的 index.ejs 文件。
然后你就可以很容易地通过 EJS 片段传递数据,你可以阅读这些文档以获取更多关于 EJS 的知识。 https://ejs.co/#docs
简单来说,您必须从 js 文件发送数据,并且您可以使用 <%= %>
标记在 ejs 文件中遇到这些数据。
从JS文件发送数据的例子:-
app.get("/",function(req,res){
res.render("/", {passed_variable:existing_variable});
})
接收 EJS 文件中那些数据的示例:-
<h1> <%=passed_variable%> </h1>