这次给大家带来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(""); 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(""); Response.Write(sbRet.ToString()); Response.End(); }
登录后复制
比如说你想返回给我的是 { userName:’user1′, password:’pass1′ } ， 当我调用 http://localhost/test?jsoncallback=callme 的时候
你实际返回 callme({ userName:'user1', password:'pass1' }) 即可。
第二步，本地文件夹内构建post测试页面，如 d:est.html
登录后复制
第三步，浏览一下并点击提交，看看返回的如果是 callme({ userName:'user1', password:'pass1' })则说明后端程序没有问题了。
第四步，我们写段通用的代码来实现上面的 html.
测试一哈 //源码 开始 function postJSONP(url, data, callback) { var template = ''; for (var k in data) { template = template + ' ' } template = template + ' ' + '' + '' + 'document.getElementById("form1").submit();' + ''; template = template.replace("{{url}}", url); var p = document.createElement("p"); p.style.display = 'none'; p.innerHTML = ''; 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); }); }
登录后复制
第五步、安全问题、
window.onmessage = function(e) { //可通过 e 来判断来源，并做一些安全方面的处理，此处读者自己去研究吧，可以加个 console.log(e) 看看 e 有哪些内容。 if (callback) callback(e.data);}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
怎样使用Vue实现树形视图数据
JS对DOM树实现遍历有哪些方法
以上就是JS跨域实现POST方法步骤详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2753078.html
