Question

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

Answer 1

以下是从一个 Window 到另一个

的简单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

Answer 2

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

你说你不想让服务器参与......你为什么要打电话提交？

[编辑] @Paul S的评论/回答看起来非常有帮助。但是，如果你需要它与浏览器兼容，你可能会看到类似jQuery PostMessage插件的东西。

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

Answer 3

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

Answer 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，textbox其他Javascript变量。

将表单值发布到html

4 个答案: