1

我想发布表单值并使用 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>
4

4 回答 4

1

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

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

以及使其工作的真实代码，假设您通过了相同的原产地政策

// 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
于 2013-02-02T18:12:29.437 回答
0

您不需要 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 变量。

于 2013-02-02T18:26:39.590 回答
0

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

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

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

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

于 2013-02-02T17:44:06.333 回答
0

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

于 2013-02-02T17:44:22.067 回答