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' })</script>则说明后端程序没有问题了。
第四步，我们写段通用的代码来实现上面的 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 div = document.createElement("div");
div.style.display = 'none';
div.innerHTML = '<iframe src=""></iframe>';
document.body.appendChild(div);
var ifrm = div.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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- 详解js跨域请求的两种方式，支持post请求
- 浅谈angular.js跨域post解决方案
- Jsonp post 跨域方案
- JavaScript使用HTML5的window.postMessage实现跨域通信例子
