Jsonp post 跨域方案


Posted in Javascript onJuly 06, 2015

近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下。

说明:
http://www.t1.com/index.php 服务端URL
当然这是我本地配置的,需要改为自己对应的地址。

客户端代码:

<script>
  $(function(){
     
    var url = 'http://www.t1.com/index.php';
    $.ajax({
      type:      'post',
      url:      url,
      data:      {name:'wangyulu'},
      dataType:    'jsonp',
      success:function(result){
        console.log(result);
      }
    });
     
  });
 </script>

服务端代码:

<?php
if($_POST){
  $arr = array('name'=>$_POST['name'], 'age'=>23);
  echo json_encode($arr);
}

浏览器运行如下图:

Jsonp post 跨域方案

看下运行结果,即使设置传送方式为 post,Jquery也会自动转为 get,难道Jsonp真的不支持 post 方式提交吗,继续折腾...

折腾到现在最终在 stackoverflow 里找到一些关于这方面的资料,看来老外也遇到这样问题呀,地址贴给大家
http://stackoverflow.com/questions/3860111/how-to-make-a-jsonp-post-request-that-specifies-contenttype-with-jquery

关键点如下图:

Jsonp post 跨域方案

看上图我们发现,箭头标记处有变化,先不管这么多了,折腾这么久了,先对应放到程序里再说嘛,万一可以呢

客户端更改:
添加:crossDomain: true
修改:dataType: "json"

服务端添加:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Max-Age: 1000');

运行结果如下图:

Jsonp post 跨域方案

Jsonp post 跨域方案

到这里我们发现问题终于解决了,但我们详细观察发现,请求时间那是个漫长啊,,,看来老外也没个效率高的解决方案,

最后,我想说的是,要想完美支持POST方式的JSONP真心不好办啊,咱就到这吧,折腾不少时间了。

以上内容可能会关联到其它技术点,有兴趣自己可去研究哈,这里主要解决 Jsonp ,写的不好,大家请勿吐槽,谢谢!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript通过class来获取元素实现代码
Feb 20 Javascript
JavaScript中常见获取元素的方法汇总
Mar 04 Javascript
理解javascript封装
Feb 23 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
js实现无缝循环滚动
Jun 23 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
老生常谈的跨域处理
Jan 11 Javascript
JS及JQuery对Html内容编码,Html转义
Feb 17 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
vue调用语音播放的方法
Sep 27 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
javascript运动详解
Jul 06 #Javascript
浅谈jQuery中height与width
Jul 06 #Javascript
jQuery中$this和$(this)的区别介绍(一看就懂)
Jul 06 #Javascript
浅谈Javascript实现继承的方法
Jul 06 #Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 #Javascript
jQuery 遍历函数详解
Jul 05 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php求两个目录的相对路径示例(php获取相对路径)
2014/03/27 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
php 多进程编程父进程的阻塞与非阻塞实例分析
2020/02/22 PHP
JavaScript修改css样式style
2008/04/15 Javascript
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
2010/07/06 Javascript
JS 如果改变span标签的是否隐藏属性
2011/10/06 Javascript
javascript实现原生ajax的几种方法介绍
2013/09/21 Javascript
document节点对象的获取方式示例介绍
2013/12/24 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
jQuery 控制文本框自动缩小字体填充
2017/06/16 jQuery
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python:pandas合并csv文件的方法(图书数据集成)
2018/04/12 Python
python 重命名轴索引的方法
2018/11/10 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
python模拟实现分发扑克牌
2020/04/22 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
一套中级Java程序员笔试题
2015/01/14 面试题
高中自我评价分享
2013/12/05 职场文书
行政人事经理职位说明书
2014/03/05 职场文书
实用的简历自我评价
2014/03/06 职场文书
社区服务活动报告
2015/02/05 职场文书
女方离婚起诉书
2015/05/18 职场文书
实施意见格式范本
2015/06/05 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书
HTML页面点击按钮关闭页面的多种方式
2022/12/24 HTML / CSS