关于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插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
基于jQuery实现瀑布流页面
Apr 11 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery实现图片放大点击切换
Jun 06 jQuery
jquery easyui如何实现格式化列
Jul 30 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
jQuery实现获取多选框的值示例
Feb 07 jQuery
JavaScript枚举选择jquery插件代码实例
Nov 17 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/07/01 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
JS解密入门 最终变量劫持
2008/06/25 Javascript
JavaScript instanceof 的使用方法示例介绍
2013/10/23 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
jQuery实现日期联动效果实例
2016/07/26 Javascript
javascript表单控件实例讲解
2016/09/13 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
Vue中render函数的使用方法
2018/01/31 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
[19:24]DOTA2客户端使用指南 一分钟快速设置轻松超神
2013/09/24 DOTA
跟老齐学Python之用while来循环
2014/10/02 Python
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
python结合API实现即时天气信息
2016/01/19 Python
Python Json序列化与反序列化的示例
2018/01/31 Python
详解Python3的TFTP文件传输
2018/06/26 Python
Python字符串对象实现原理详解
2019/07/01 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
西班牙手机之家:Phone House
2018/10/18 全球购物
Etam俄罗斯:法国女士内衣和家居服网上商店
2019/10/30 全球购物
Java基础知识面试要点
2016/07/29 面试题
网络教育毕业生自我鉴定
2013/10/10 职场文书
研究生求职推荐信范文
2013/11/30 职场文书
领导班子专题民主生活会情况想汇报
2014/09/30 职场文书
学前班学生评语
2014/12/29 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
助学感谢信范文
2015/01/21 职场文书
小学生暑假安全公约
2015/07/14 职场文书
Python 全局空间和局部空间
2022/04/06 Python