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

【问题标题】：Transfer data from one HTML file to another将数据从一个 HTML 文件传输到另一个
【发布时间】：2013-07-04 08:02:50
【问题描述】：

我是 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>

next.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

【问题讨论】：

查看 jQuery 的 load() 函数。
在不相关的注释上，您有一个错字：scr="asd.js" 应该是 src="asd.js"
@LieRyan 感谢指正
其实只要使用EHTML就可以做到这一点：github.com/Guseyn/EHTML

标签： javascript html

【解决方案1】：

试试这个代码：在 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不能在不同页面之间共享数据，我们必须使用一些解决方案，e.g. URL 获取参数（在我使用这种方式的代码中）、cookies、localStorage 等。将名称参数存储在 URL (?name=...) 和 next.html 解析 URL 并从上一页获取所有参数。

PS。我是一个非英语母语的人，如果有必要，请您纠正我的信息

【讨论】：

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

【解决方案2】：

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

localStorage["key"] = value;

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

您还可以附加事件处理程序来侦听更改，尽管不同浏览器的事件 API 略有不同。 More on the topic.

【讨论】：

我会通过内部的JS还是外部的？
@newbie：没关系，你可以把你的 JavaScript 放到 HTML 本身，或者从其他地方链接，没关系。
最简单的解决方案:)

【解决方案3】：

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

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

会话 Cookie
HTML5 本地存储
在 url 中发布变量并通过 window 对象在 next.html 中检索它们

【讨论】：

哪个选项更适合传递数据
@ShailendraKushwah cookie，因为 LocalStorage 在生产方面并不方便，并且在 URL 中发布不安全，并且可以读取和访问数据。
POST 可以通过表单提交完成，也可以通过 ajax stackoverflow.com/a/1244323/2914407

【解决方案4】：

使用 Javascript localStorage 类，您可以使用浏览器的默认本地存储来保存（键、值）对，然后使用该键在您需要的任何页面上检索这些值。例子 - Pageone.html -

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

Pagetwo.html -

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

【讨论】：

【解决方案5】：

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

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

这是通过获取请求发送的

【讨论】：

【解决方案6】：

我用它在每个页面上设置个人资料图片。

在第一页设置值为：

localStorage.setItem("imageurl", "ur image url");

或在第二页获取值：

var imageurl=localStorage.getItem("imageurl");
document.getElementById("profilePic").src = (imageurl);

【讨论】：

【解决方案7】：

嗨，我要把这个留在这里，因为限制，我无法发表评论，但我发现 AlexFitiskin 的回答很完美，但需要稍作修正

document.getElementById('here').innerHTML = data.name;

这需要改成

document.getElementById('here').innerHTML = data.n;

我知道五年后帖子的所有者不会发现它有任何重要性，但这是为将来可能遇到的人准备的。

【讨论】：

【解决方案8】：

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

<body>

<form name="form1" action="#" 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>

客户端脚本

function testJS(){
var name = jQuery("#name").val();
jQuery.load("next.html",function(){
jQuery("#here").html(name);
});
}

jQuery 是一个 js 库，它简化了它的编程。所以我推荐使用 jQuery rathar 然后 js。在这里，我只是在提交按钮单击事件上获取输入元素（id = name）的值，然后加载所需的页面（next.html），如果加载函数成功执行，我将调用一个函数，它将数据放在所需的位置。

jquery加载函数http://api.jquery.com/load/

【讨论】：

【解决方案9】：

以下是使用 html 将值从一个页面传递到另一个页面的示例代码。此处将 page1 中的数据传递给 page2，并使用 javascript 进行检索。

1) page1.html

<!-- Value passing one page to another 
     Author: Codemaker
-->
<html>
    <head>
        <title> Page 1 - Codemaker</title>
    </head>
    <body>
        <form method="get" action="page2.html">
            <table>
                <tr>
                    <td>First Name:</td>
                    <td><input type=text name=firstname size=10></td>
                </tr>
                <tr>
                    <td>Last Name:</td>
                    <td><input type=text name=lastname size=10></td>
                </tr>
                <tr>
                    <td>Age:</td>
                    <td><input type=text name=age size=10></td>
                </tr>
                <tr>
                    <td colspan=2><input type=submit value="Submit">
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

2) page2.html

<!-- Value passing one page to another 
     Author: Codemaker
-->

<html>
    <head>
        <title> Page 2 - Codemaker</title>
    </head>
    <body>
        <script>
            function getParams(){
                var idx = document.URL.indexOf('?');
                var params = new Array();
                if (idx != -1) {
                    var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
                    for (var i=0; i<pairs.length; i++){
                        nameVal = pairs[i].split('=');
                        params[nameVal[0]] = nameVal[1];
                    }
                }
                return params;
            }
            params = getParams();
            firstname = unescape(params["firstname"]);
            lastname = unescape(params["lastname"]);
            age = unescape(params["age"]);
            document.write("firstname = " + firstname + "<br>");
            document.write("lastname = " + lastname + "<br>");
            document.write("age = " + age + "<br>");
        </script>
    </body>
</html>

【讨论】：

如何将这些值传递到脚本块之外？下面的例子<h1>Pluralsight Training:PS:- Bank Account Details</h1> <h2>PS: Bank Account Details </h2> params = getParams(); <p>Account # : params["accountNo"] </p> <p>Account Holder Name : params["accountHolderName"]</p> <p>Balance : params["balance"]</p>