JavaScript 跨域之POST实现方法

更新时间：2018年05月07日 10:18:15 作者：空老吹

本篇文章主要介绍了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' } ，当我调用 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观察者模式的介绍及使用
这篇文章主要介绍了java设计模式中观察者模式，全文通过举例子及代码的形式进行了一个简单的介绍，希望大家能够理解并且学习到其中知识
2021-08-08
JavaScript中常见的字符串操作函数及用法汇总
这篇文章主要介绍了JavaScript中常见的字符串操作函数及用法,实例汇总了javascript常见的字符串转换、分割、查询、替换等技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
js弹出确认是否删除对话框
这篇文章主要介绍了js弹出确认是否删除对话框，具体实现代码如下，需要的朋友可以参考下
2014-03-03
移动端图片上传旋转、压缩问题的方法
在本篇文章中我们给大家分享了关于移动端图片上传旋转、压缩问题的解决方法，有需要的朋友们参考下
2018-10-10
uni-app跨端自定义指令实现按钮权限操作
实现uni-app自定义指令按钮权限需要涉及到对于vue.config.js新增loader配置，基础正则知识，webpack的loader开发和调试，以及npm本地调试和发布，接下来就从了解这些前置知识开始，需要的朋友可以参考下
2023-01-01
JS函数本身的作用域实例分析
这篇文章主要介绍了JS函数本身的作用域,结合实例形式分析了JS函数作用域相关原理、操作技巧与使用注意事项,需要的朋友可以参考下
2020-03-03
js将iframe中控件的值传到主页面控件中的实现方法
主要是通过在主页面定义一个传输数据的函数GetData(data)，然后在iframe嵌入页面中通过parent.GetData(data),这样即可在GetData实现将data进行处理即可。
2013-03-03
JS验证字符串功能
这篇文章主要介绍了JS验证字符串功能实例代码,代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-02-02
深入解析JS实现3D标签云的原理与方法
这篇文章主要介绍了深入解析JS实现3D标签云的原理与方法,结合实例形式详细分析了3D标签云原理、实现技巧与相关操作注意事项,需要的朋友可以参考下
2019-08-08
微信小程序实现Swiper轮播图效果
这篇文章主要介绍了微信小程序实现Swiper轮播图效果，文中示例代码介绍的非常详细，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-11-11