将数据从一个 HTML 文件传输到另一个

IT技术 javascript html
2021-02-11 02:32:08

我是 HTML 和 JavaScript 的新手，我想要做的是从 HTML 文件中提取设置在那里的内容并通过 JavaScript 将其显示到另一个 HTML 文件中。

这是我到目前为止所做的测试：
testing.html

<html>
<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
name:<input type ="text" id="name" name="n">
<input type="submit" value="next" >
<button type="button" id="print" onClick="testJS()"> Print </button>
</form>

</body>
</html>

下一个.html

<head>
   <script language="javascript" type="text/javascript" src="asd.js"></script>
</head>

<body>

<form name="form1" action="next.html" method="get">
<table>
    <tr>
        <td id="here">test</td>
    </tr>
</table>
</form>

</body>
</html>

asd.js

function testJS()
{

var b = document.getElementById('name').value

document.getElementById('here').innerHTML = b;

}

test.html-> ads.js（将从 test.html 中提取值并设置为 next.html）->next.html

6个回答

试试这个代码：在 testing.html

function testJS() {
    var b = document.getElementById('name').value,
        url = 'http://path_to_your_html_files/next.html?name=' + encodeURIComponent(b);

    document.location.href = url;
}

在 next.html 中：

window.onload = function () {
    var url = document.location.href,
        params = url.split('?')[1].split('&'),
        data = {}, tmp;
    for (var i = 0, l = params.length; i < l; i++) {
         tmp = params[i].split('=');
         data[tmp[0]] = tmp[1];
    }
    document.getElementById('here').innerHTML = data.name;
}

说明：javascript不能在不同的页面之间共享数据，我们必须使用一些解决方案，例如URL get params（在我的代码中我是这样使用的），cookies，localStorage等。将name参数存储在URL中（？name= ...) 并在 next.html 解析 URL 并从上一页获取所有参数。

附注。我的母语不是英语，如有必要，请您更正我的信息

@ShounakRay 你能帮我详细说明一下这段代码吗？我是初学者，我试图在我的实践中实现类似的目标，但我在这里有点困惑。
2021-03-21 02:32:08
你是个天才。
2021-03-24 02:32:08
您可以使用外部 JS，例如test.js. 在此文件中包含 2 个函数：（testJS代码块 1）和onLoad（代码块 2，但替换window.onload = function为function onLoad）。在testing.html绑定testJS函数到按钮点击动作 ( onClick="testJS()") 和在next.html绑定onLoad函数到 body onload 动作 ( onload="onLoad")
2021-03-26 02:32:08

设置在页面之间持续存在的全局变量的老式方法是在 Cookie 中设置数据。现代方式是使用本地存储，它具有良好的浏览器支持（IE8+、Firefox 3.5+、Chrome 4+、Android 2+、iPhone 2+）。使用 localStorage 就像使用数组一样简单：

localStorage["key"] = value;

... in another page ...
value = localStorage["key"];

您还可以附加事件处理程序来侦听更改，尽管浏览器之间的事件 API 略有不同。更多关于这个话题。

我会通过内部 JS 还是外部来做到这一点？
2021-03-19 02:32:08
@新手：没关系，你可以把你的 JavaScript 放在 HTML 本身中，或者从其他地方链接它，没关系。
2021-04-06 02:32:08
最简单的解决方案:)
2021-04-10 02:32:08

假设你在浏览器环境中谈论这个 js（不像其他人像 nodejs），不幸的是我认为你试图做的事情是不可能的，因为这不是它应该的工作方式。

Html 页面通过 HTTP 协议传送到浏览器，这是一种“无状态”协议。如果您仍然需要在页面之间传递值，可能有 3 种方法：

  1. 会话 Cookie
  2. HTML5 本地存储
  3. 在 url 中发布变量并通过window对象在 next.html 中检索它们
POST 可以通过表单提交完成，或者使用 ajax stackoverflow.com/a/1244323/2914407
2021-03-20 02:32:08
哪个选项更适合传递数据
2021-03-22 02:32:08
@ShailendraKushwah cookie，因为 LocalStorage 在生产时不方便，并且在 URL 中发布不安全并且可以读取和访问数据。
2021-04-11 02:32:08

使用 Javascript localStorage类，您可以使用浏览器的默认本地存储来保存 (key,value) 对，然后在您需要使用密钥的任何页面上检索这些值。示例 - Pageone.html -

<script>
    localStorage.setItem("firstname", "Smith");
</script>

Pagetwo.html -

<script>
    var name=localStorage.getItem("firstname");
</script>

您可以简单地使用window.location.href首先将要发送的值存储testing.html在脚本标记中来发送数据，变量说

<script> 
  var data = value_to_send
  window.loaction.href="next.htm?data="+data
</script>

这是通过获取请求发送的

其它你可能感兴趣的问题
上一篇HTML 表格转 Excel Javascript 下一篇等到 flag=true