关于jQuery.ajax()的jsonp碰上post详解


Posted in jQuery onJuly 02, 2017

前言

以前一直以为当$.ajax()的 dataType设置为jsonp时,其method(请求方法)无论怎么设置,都会变成get,直到前两天遇到了一个坑。

下面来一起看看详细的介绍:

关于跨域请求与jsonp

  • 跨域:由于受到同源策略(协议、域名、端口三者必须全部相同)的影响,ajax请求会受到限制,要突破这种限制,跨域便产生了。跨域的解决方案有多种,这里不展开阐述,只是针对GET请求中的jsonp跨域解决方案做一下说明。
  • jsonp,本质上jsonp不是xhr异步请求,就是请求了一个js文件,因此在chrome的network面板中的xhr标签下看不到jsonp的跨域请求,在js标签下能看到。就是利用script标签中src不受同源策略的限制,前端定义了回调函数,请求的js脚本中获取数据,并执行前端的回调函数,因此前后端需要统一定义下回调函数名。
  • $.ajax中jsonp,$.ajax对jsonp进行了封装看起来像是ajax请求。由于jsonp是针对get请求的跨域解决,因此之前的经验告诉我,即使type设置了post,在jsonp的时候,也会自动转换成get,直到有一天踩了个坑。翻看$.ajax模块的源码发现,只有去手动设置crossDomain为true,或者实际上是跨域,才会设置为get。否则还是填入的type

关于jQuery.ajax()的jsonp碰上post详解

关于jQuery.ajax()的jsonp碰上post详解

结论:

手动设置crossDomain为true,或者真的是跨域,才会修改type为GET,否则还是传入的type参数

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery Ajax async=>false异步改为同步时,解决导致浏览器假死的问题
Jul 22 jQuery
Jquery让form表单异步提交代码实现
Nov 14 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 #jQuery
jQuery表单设置值的方法
Jun 30 #jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
基于jQuery实现的Ajax 验证用户名唯一性实例代码
Jun 28 #jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 #jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 #jQuery
You might like
一漂亮的PHP图片验证码实例
2014/03/21 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
js静态作用域的功能。
2006/12/25 Javascript
什么是JavaScript
2009/08/13 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
VueJS全面解析
2016/11/10 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
antd form表单数据回显操作
2020/11/02 Javascript
[47:42]完美世界DOTA2联赛PWL S2 GXR vs Ink 第一场 11.19
2020/11/20 DOTA
python多线程编程方式分析示例详解
2013/12/06 Python
Python Socket编程入门教程
2014/07/11 Python
讲解Python中的标识运算符
2015/05/14 Python
Python实现截屏的函数
2015/07/26 Python
numpy下的flatten()函数用法详解
2019/05/27 Python
在Python中COM口的调用方法
2019/07/03 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
Python读取多列数据以及用matplotlib制作图表方法实例
2020/09/23 Python
瑞士国际航空官网:SWISS
2016/07/21 全球购物
美国Rue La La闪购网站:奢侈品、中高档品牌限时折扣
2016/10/19 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
竞聘书模板
2014/03/31 职场文书
国际贸易系求职信
2014/08/09 职场文书
合作经营协议书范本
2014/09/16 职场文书
2014教师年度工作总结
2014/11/10 职场文书
Python实战之OpenCV实现猫脸检测
2021/06/26 Python
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫