JavaScript 跨域之POST实现方法


Posted in Javascript onMay 07, 2018

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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
js操作XML文件的实现方法兼容IE与FireFox
Jun 25 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
Sep 04 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
Sep 01 Javascript
JS中数据结构之栈
Jan 01 Javascript
ES6关于Promise的用法详解
May 07 #Javascript
React Form组件的实现封装杂谈
May 07 #Javascript
vue如何将v-for中的表格导出来
May 07 #Javascript
浅谈Vue 数据响应式原理
May 07 #Javascript
浅谈Vue响应式(数组变异方法)
May 07 #Javascript
在HTML文档中嵌入JavaScript的四种方法
May 07 #Javascript
详解JavaScript的BUG和错误
May 07 #Javascript
You might like
php auth_http类库进行身份效验
2009/03/19 PHP
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP遍历目录并返回统计目录大小
2014/06/09 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
初学Javascript的一些总结
2008/11/03 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
VueJS全面解析
2016/11/10 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
简单谈谈JS中的正则表达式
2017/09/11 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
js中apply和call的理解与使用方法
2019/11/27 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
2020/10/13 Javascript
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
Python使用smtplib模块发送电子邮件的流程详解
2016/06/27 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
Python删除Java源文件中全部注释的实现方法
2017/08/30 Python
Python自定义函数定义,参数,调用代码解析
2017/12/27 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
python学生信息管理系统实现代码
2019/12/17 Python
java字符串格式化输出实例讲解
2021/01/06 Python
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
27个经典Linux面试题及答案,你知道几个?
2014/03/11 面试题
Java程序员面试90题
2013/10/19 面试题
公务员政审个人鉴定
2014/02/25 职场文书
企业承诺书格式
2014/05/21 职场文书
环境卫生倡议书
2014/08/29 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript