关于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使用unlock.js插件实现滑动解锁
Apr 04 jQuery
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
jquery实现图片轮播器
May 23 jQuery
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
jquery 一键复制到剪切板的实例
Sep 20 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
JQuery animate动画应用示例
May 14 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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 中文和编码判断代码
2010/05/16 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Yii框架实现记录日志到自定义文件的方法
2017/05/23 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
公共js在页面底部加载的注意事项介绍
2013/07/18 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
Python实现partial改变方法默认参数
2014/08/18 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
德国家具在线:Fashion For Home
2017/03/11 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
股份合作协议书
2014/04/12 职场文书
创意婚礼策划方案
2014/05/18 职场文书
学籍证明模板
2014/11/21 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
如何解决php-fpm启动不了问题
2021/11/17 PHP
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers