将表单值发布到 html答案

【问题标题】：post form values to html将表单值发布到 html
【发布时间】：2013-02-02 17:40:46
【问题描述】：

我想发布表单值并使用 Javascript 在另一个 html 页面上显示它们。不应使用服务器端技术。我有一个发布值的函数，但要将值读取到另一个 html 页面，我想我遗漏了一些东西。下面是代码。有什么帮助吗？提前致谢。

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Untitled Page</title>
<script type="text/javascript">

function post_to_page(path, params, method) {
  method = method || "post"; // Set method to post by default, if not specified.
  var form = document.createElement("form");
   form.setAttribute("method", method);
   form.setAttribute("action", path);
   form.setAttribute("target", "formresult");

    for (var key in params) {
        if (params.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", params[key]);
            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    // creating the 'formresult' window with custom features prior to submitting the form
    window.open('target.htm', 'formresult', 'scrollbars=no,menubar=no,height=600,width=800,resizable=yes,toolbar=no,status=no');

    form.submit();

}

</script>

</head>
<body>
<form id="form1" action="target.htm" method="post">
<div>
USB No: <input name="usbnum" id="usbnum" type="text"/><br />
USB Code: <input name="usbcode" id="usbcode" type="text"/>
</div>
<button onclick="post_to_page()">Try it</button>
</div>
</form>
</body>
</html>

【问题讨论】：

也许有帮助：window.postMessage。由于您没有向服务器提交任何数据，因此您实际上并不想 POST 而是将信息从一个窗口传递到另一个窗口。由于您可能传递相同的源策略，因此您可以访问另一个窗口的 Window（从 window.open 调用返回），因此有很多方法可以传递信息。

标签： javascript html forms post

【解决方案1】：

这是一个简单的example 将数据从一个窗口移动到另一个

<!-- HTML -->
<textarea id="foo"></textarea><br/>
<input id="bar" value="click" type="button"/>

以及使它工作的真实代码，假设您通过same origin policy

// JavaScript
var whatever = 'yay I can share information';

// in following functions `wnd` is the reference to target window
function generateWhatever(wnd, whatever) { // create the function actually doing the work
    return function () {wnd.document.getElementById('foo').innerHTML = whatever};
} // why am I using a generator? You don't have to, it's a choice

function callWhenReady(wnd, fn) { // make sure you only invoke when things exist
    if (wnd.loaded) fn(); // already loaded flag (see penultimate line)
    else wnd.addEventListener('load', fn); // else wait for load
}

function makeButtonDoStuff() { // seperated button JS from HTML
    document
    .getElementById('bar')
    .addEventListener('click', function () {
        var wnd = window.open(window.location); // open new window, keep reference
        callWhenReady(wnd, generateWhatever(wnd, whatever)); // set up function to be called
    });
}

window.addEventListener('load', function () {window.loaded = true;}); // set loaded flag (do this on your target, this example uses same page)
window.addEventListener('load', makeButtonDoStuff); // link button's JavaScript to HTML when button exists

【讨论】：

【解决方案2】：

您无法使用 JavaScript 获取 POST 值。您可以使用 GET 方法来传递值。

【讨论】：

【解决方案3】：

如果您使用的是 html5，则可以使用 localStorage。否则，查询字符串或 cookie 是您的其他选择。

你说你不想让服务器参与进来……你为什么要调用提交？

[编辑] @Paul S 的评论/答案看起来很有帮助。但如果您需要跨浏览器兼容，您可能会查看 jQuery PostMessage 插件之类的东西。

http://benalman.com/projects/jquery-postmessage-plugin/

【讨论】：

【解决方案4】：

您不需要 POST 请求即可将数据从一个页面发送到另一个页面。只需使用 LocalStorage 即可。只需在表单提交时调用 Javascript 函数。这可能会有所帮助：

HTML：

<form id="form1" action="target.htm" method="post">
    <div>
        USB No: <input name="usbnum" id="usbnum" type="text"/><br />
        USB Code: <input name="usbcode" id="usbcode" type="text"/>
    </div>
    <button onclick="post_to_page()">Try it</button>
</form>

Javascript：

function post_to_page() {
    localStorage.value = "Your content here";
    window.location = "nextpage.html";
}

这会将数据保存在本地并转到下一页。在下一页中，只需调用此函数即可检索存储的数据：

function get_stored_data() {
    alert(localStorage.value);
}

您可以简单地将其分配给 div、文本框和其他 Javascript 变量。

【讨论】：