关于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 ajax调用webservice注意事项
Oct 08 jQuery
jquery中done和then的区别(详解)
Dec 19 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jquery实现搜索框功能实例详解
Jul 23 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
JS 遍历 json 和 JQuery 遍历json操作完整示例
Nov 11 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
jquery实现简单自动轮播图效果
Jul 29 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读取XML值的代码(推荐)
2011/01/01 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
浅析php原型模式
2014/11/25 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
jquery ajax请求实例深入解析
2012/11/26 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
jQuery中:first选择器用法实例
2014/12/30 Javascript
Javascript之Math对象详解
2016/06/07 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
vue 配置多页面应用的示例代码
2018/10/22 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
2020/07/26 Javascript
Vue项目如何引入bootstrap、elementUI、echarts
2020/11/26 Vue.js
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
举例简单讲解Python中的数据存储模块shelve的用法
2016/03/03 Python
Python实现的knn算法示例
2018/06/14 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
tensorflow 实现自定义梯度反向传播代码
2020/02/10 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
数学系个人求职信范文
2014/01/30 职场文书
大学生怎样写好自荐信
2014/02/25 职场文书
大学第二课堂活动总结
2014/07/08 职场文书
班子四风对照检查材料
2014/08/21 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
酒店管理失职检讨书
2014/09/16 职场文书
英语教师求职信范文
2015/03/20 职场文书
2016年机关单位节能宣传周活动总结
2016/04/05 职场文书
AJAX实现指定部分页面刷新效果
2021/10/16 Javascript