JavaScript 跨域之POST实现方法

来源：动视网责编：小采时间：2020-11-27 22:15:15

JavaScript 跨域之POST实现方法

JavaScript 跨域之POST实现方法:javascript 跨域是一个很常见的问题，其中 jsonp 是一个最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通过 jsonp 来 post 一些数据，就头大了。此处通过在一个 iframe 中生成 form 表单的形式来实现 post，并通过 postMes

推荐度：

点击下载本文 文档为doc格式

导读JavaScript 跨域之POST实现方法:javascript 跨域是一个很常见的问题，其中 jsonp 是一个最常用的手段，但是 jsonp 只支持 get，不支持 post，所以如果想通过 jsonp 来 post 一些数据，就头大了。此处通过在一个 iframe 中生成 form 表单的形式来实现 post，并通过 postMes

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);
}

JavaScript 跨域之POST实现方法

推荐度：

点击下载本文 文档为doc格式

标签：方法方式 javascript

热门焦点

JavaScript 跨域之POST实现方法

JavaScript 跨域之POST实现方法

JavaScript 跨域之POST实现方法

最新推荐

猜你喜欢

热门推荐