1

フォームの値をPOSTし、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

html5 を使用している場合は、localStorage を使用できます。それ以外の場合は、クエリ文字列または Cookie が他のオプションです。

サーバーを関与させたくないと言った...なぜsubmitを呼び出しているのですか？

[編集] @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 に答える
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、textbox、その他の Javascript 変数に割り当てるだけです。

于 2013-02-02T18:26:39.590 に答える