关于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 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JQuery实现定时刷新功能代码
May 09 jQuery
jQuery复合事件用法示例
Jun 10 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
JavaScript自执行函数和jQuery扩展方法详解
Oct 27 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
完善CodeIgniter在IDE中代码提示功能的方法
2014/07/19 PHP
php实现向javascript传递数组的方法
2015/07/27 PHP
php阳历转农历优化版
2016/08/08 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
jquery animate实现鼠标放上去显示离开隐藏效果
2013/07/21 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
javascript封装简单实现方法
2015/08/11 Javascript
AngularJS入门教程之路由与多视图详解
2016/08/19 Javascript
微信小程序 利用css实现遮罩效果实例详解
2017/01/21 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
Vue自定义指令详解
2017/07/28 Javascript
Three.js基础学习教程
2017/11/16 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
js replace替换字符串同时替换多个方法
2018/11/27 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
python列表操作实例
2015/01/14 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
python实现飞机大战游戏
2020/10/26 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
如何基于Python实现自动扫雷
2020/01/06 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
python中逻辑与或(and、or)和按位与或异或(&、|、^)区别
2020/08/05 Python
Python如何执行系统命令
2020/09/23 Python
美国最大的高尔夫发球时间预订网站:TeeOff.com
2018/03/28 全球购物
荟萃全球保健品:维他购
2018/05/09 全球购物
小学教师的个人自我鉴定
2013/10/26 职场文书
信息专业个人的自我评价
2013/12/27 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
志愿者活动总结报告
2014/06/27 职场文书
婚前保证书范文
2015/02/28 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
高一作文之暖冬
2019/11/09 职场文书