PHPOS开发网

JavaScript 跨域之POST实现方法

PHPOS开发网 http://www.phpos.net 2018-05-10 00:01 出处:phpos 作者:phpos 编辑:@
本篇文章主要介绍了JavaScript 跨域之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' }  , 当我调用 ?jsoncallback=callme 的时候

你实际返回 <script>callme({ userName:'user1', password:'pass1' })</script> 即可。

第二步,本地文件夹内构建post测试页面,如 d:\test.html

<form action="http://localhost/test" method="post">   <input type="text" value="user1" />   <input type="text" value="pass1" /> <input type="text" 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">'; for (var k in data) { template = template + '  <input type="text" value="'+data[k]+'" />' } template = template + '  <input type="text" 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); }

0

精彩评论

暂无评论...
验证码 换一张
取 消