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);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容