关于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加密密码到cookie的实现代码
Apr 18 jQuery
JQuery实现图片轮播效果
May 08 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery绑定事件方法及区别(bind,click,on,live,one)
Aug 14 jQuery
jQuery事件对象的属性和方法详解
Sep 09 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
jquery实现穿梭框功能
Jan 19 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/02/20 PHP
Web程序工作原理详解
2014/12/25 PHP
使用php实现从身份证中提取生日
2016/05/09 PHP
PHP字符串逆序排列实现方法小结【strrev函数,二分法,循环法,递归法】
2017/01/13 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
PHP+Mysql分布式事务与解决方案深入理解
2021/02/27 PHP
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
2017/01/13 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
javascript中call()、apply()的区别
2019/03/21 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
js实现全选和全不选功能
2020/07/28 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
使用Python实现分别输出每个数组
2019/12/06 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
python自动化发送邮件实例讲解
2021/01/04 Python
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
DIY蛋糕店的创业计划书范文
2013/12/26 职场文书
2015年教研室工作总结范文
2015/05/23 职场文书
春风化雨观后感
2015/06/11 职场文书
浅谈MySQL之select优化方案
2021/08/07 MySQL