ホームページ > 記事 > ウェブフロントエンド > JS を使用してドメイン間で POST を実装する方法
JS を使用してドメイン間で POST を実装する方法
- php中世界最好的语言オリジナル
- 2018-05-23 13:40:331512ブラウズ
今回は、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 などの投稿テスト ページをローカル フォルダーに構築します<form action="http://localhost/test" method="post"> <input type="text" name="userName" value="user1" /> <input type="text" name="password" value="pass1" /> <input type="text" name="jsoncallback" value="callme" /> <input type="submit" value="提交" /> </form>ステップ 3、参照して送信をクリックし、返されたものが <script>callme({ userName:' user1' であるかどうかを確認します) 、password:'pass1' })</script> は、バックエンド プログラムに問題がないことを意味します。 4 番目のステップでは、上記の HTML を実装するための一般的なコードを作成します。
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>测试一哈</title>
</head>
<body>
<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" />'
+ '</form>'
+ '<'+'script>'
+ 'document.getElementById("form1").submit();'
+ '</'+'script>';
template = template.replace("{{url}}", url);
var p = document.createElement("p");
p.style.display = 'none';
p.innerHTML = '<iframe src=""></iframe>';
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>
</body>
</html> 5 番目のステップでは、セキュリティの問題です。
window.onmessage = function(e) {
//可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
if (callback) callback(e.data);
} この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、 php 中国語ウェブサイト その他の関連記事にご注意ください。 推奨書籍:
VUE での領域セレクター コンポーネントの使用方法の詳細な説明
以上がJS を使用してドメイン間で POST を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。