這次帶給大家JS跨域實現POST方法步驟詳解，JS跨域實現POST方法的注意事項有哪些，下面就是實戰案例，一起來看一下。
javascript 跨域是一個很常見的問題，其中jsonp 是一個最常用的手段，但是jsonp 只支援get，不支援post，所以如果想透過jsonp 來post 一些數據，就頭大了。
此處透過在一個 iframe 中產生 form 表單的形式來實現 post，並透過 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();
}登入後複製
比如說你想回傳給我的是 { userName:'user1', password:'pass1' } ，當我呼叫 http://localhost/test ?jsoncallback=callme 的時候
你實際回傳<script>callme({ userName:'user1', password:'pass1' })</script> 即可。
第二步，本地資料夾內建立post測試頁面，如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>
登入後複製
第三步，瀏覽一下並點擊提交，看看返回的如果是< ;script>callme({ userName:'user1', password:'pass1' })則表示後端程式沒有問題了。
第四步，我們寫段通用的程式碼來實現上面的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>登入後複製
第五步、安全性問題、
window.onmessage = function(e) {
//可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。
if (callback) callback(e.data);
}登入後複製
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
怎麼使用Vue實作樹狀視圖資料
JS對DOM樹實作遍歷有哪些方法
#
以上是JS跨域實現POST方法步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
