关于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 24 jQuery
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现简单的回到顶部totop功能示例
Oct 16 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
详解jQuery中的easyui
Sep 02 jQuery
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
jquery登录的异步验证操作示例
May 09 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
jQuery 隐藏/显示效果函数用法实例分析
May 20 jQuery
JQuery实现折叠式菜单的详细代码
Jun 03 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
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
PHP实现八皇后算法
2019/05/06 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
一段实时更新的时间代码
2006/07/07 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
DOM操作原生js 的bug,使用jQuery 可以消除的解决方法
2016/09/04 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
vue实现拖拽效果
2019/12/23 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
PyCharm代码回滚,恢复历史版本的解决方法
2018/10/22 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
基于python的Paxos算法实现
2019/07/03 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python新手学习使用库
2020/06/11 Python
印度尼西亚最大和最全面的网络商城:Blibli.com
2017/10/04 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
《陈涉世家》教学反思
2014/04/12 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
合同审查法律意见书
2015/06/04 职场文书
答谢酒会主持词
2015/07/02 职场文书
优胜劣汰,强者为王——读《鲁滨逊漂流记》有感
2019/08/15 职场文书
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python