ホームページ >ウェブフロントエンド >jsチュートリアル >JSを使用してドメイン間でPOSTを実装する手順の詳細な説明
今回はJSのクロスドメインPOSTメソッドの手順を詳しく解説します。実際の事例を見てみましょう。
Post は、iframe でフォームを生成することによってここで実装され、postMessage を通じて呼び出し元に値を返します。 最初のステップでは、まず jsonp を受け入れるバックエンド コードを実装します。実装に使用する言語については、自分で決定します。 C# コードは次のとおりです:protected void Page_Load(object sender, EventArgs e) { StringBuilder sbRet = new StringBuilder(); sbRet.Append("<script>"); sbRet.Append(Request["jsoncallback"]); sbRet.Append("({"); foreach (string k in Request.Form) { if (k == "jsoncallback") continue; sbRet.Append("'"+k+"':'"+Request.Form[k]+"'"); } sbRet.Append("});"); sbRet.Append("</script>"); Response.Write(sbRet.ToString()); Response.End(); }たとえば、 http://localhost/test?jsoncallback=callme
を呼び出したときに、私に返したいのは { userName:'user1', password:'pass1' } です。
実際には <script>callme({ userName:'user1', password:'pass1' })</script> を返すことができます。 2 番目のステップ、d:test.html などの投稿テスト ページをローカル フォルダーに構築します ステップ 3、参照して送信をクリックし、返されたものが <script>callme({ userName:' user1' であるかどうかを確認します) 、password:'pass1' })</script> は、バックエンド プログラムに問題がないことを意味します。 4 番目のステップでは、上記の HTML を実装するための一般的なコードを作成します。nbsp;html> <meta> <title>测试一哈</title> <script> //源码 开始 function postJSONP(url, data, callback) { var template = '<form action="{{url}}" method="post" id="form1">'; for (var k in data) { template = template + ' <input type="text" name="'+k+'" value="'+data[k]+'" />' } template = template + ' <input type="text" name="jsoncallback" value="function callback(data) { parent.postMessage(data, \'*\'); } callback" />' + '' + '<'+'script>' + 'document.getElementById("form1").submit();' + '</'+'script>'; template = template.replace("{{url}}", url); var p = document.createElement("p"); p.style.display = 'none'; p.innerHTML = '<iframe src="">'; document.body.appendChild(p); var ifrm = p.children[0]; var cwin = ifrm.contentWindow; cwin.document.write(template); window.onmessage = function(e) { if (callback) callback(e.data); } } //源码 结束 //使用测试 window.onload = function() { postJSONP('http://localhost:59898/WebForm1.aspx', { userName: '张静', password: '就不告诉你' }, function(data) { console.log(11, data); }); postJSONP('http://localhost:59898/WebForm1.aspx', { 仓库: '1号大仓', 面积: '2万平米' }, function(data) { console.log(22, data); }); } </script>5 番目のステップでは、セキュリティの問題です。
window.onmessage = function(e) { //可通过 e 来判断来源,并做一些安全方面的处理,此处读者自己去研究吧,可以加个 console.log(e) 看看 e 有哪些内容。 if (callback) callback(e.data); }この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 php 中国語ウェブサイト その他の関連記事にご注意ください。 推奨書籍:
JS で DOM ツリー トラバーサルを実装するメソッドとは何ですか
以上がJSを使用してドメイン間でPOSTを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。