如何在没有任何数据库的情况下将数据从一个页面传输到另一个页面?

时间:2017-03-13 14:06:39

标签: html5

我想在html中将数据从一个页面传输到下一页,而不使用任何数据库。我想在第一页上填写的下一页显示数据,如用户详细信息/用户配置文件信息。

3 个答案:

答案 0 :(得分:1)

您可以通过多种方式在JavaScript中执行此类操作。两种主要技术如下。

  • 单页应用。 这是一个导航实际上不会完整加载页面的应用程序,但新的"页面"通过ajax拉入或通过javascript生成。构建它们的框架很多,但ReactPreact是我的最爱。

  • 将变量存储在localStoragesessionStorage中,并使用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.jsexpress 才能使用这个库。

这里是下载过程的链接。 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>