jQuery中JSONP的两种实现方式详解


Posted in Javascript onSeptember 26, 2016

前台代码如下:

jQuery中JSONP的两种实现方式详解

后台Action代码如下:

jQuery中JSONP的两种实现方式详解

运行后就可以看到结果了。我追踪了下后台ProcessCallback代码,如下图:

jQuery中JSONP的两种实现方式详解

可以看到jsonCallback的值为"jQuery17104721....",它是前端传给远程服务器后台Action的。这里 jQuery171..表示的是jQuery的版本,可以简单地将这个理解为JSONP类型请求回调函数,jQuery在我们每次指定Ajax请求方式为 JSONP时都会生成这么一个JSONP回调函数。虽然jQuery会自动帮我们生成一个回调函数,但是我们也可以通过设置 jsonpCallback 参数为jsonp请求定制一个我们自己的回调函数。

第一种方式下面这三行代码设定了JSONP请求方式:

dataType: "jsonp",

jsonp: "jsonpcallback",// 指定回调函数,这里名字可以为其他任意你喜欢的,比如callback,不过必须与下一行的GET参数一致

data: "name=jxq&email=feichexia@yahoo.com.cn&jsonpcallback=?", // jsonpcallback与上面的jsonp值一致

第二种方式则直接在GET参数后面带上jsonpcallback=?来标识。

我们可以推断这么做以后,jQuery内部机制就帮我们绕过了浏览器的跨域访问限制,然后就可以像正常请求同域Action一样请求跨域Action了。

最后返回的是一个函数表达式:

return jsonCallback + "(" + new JavaScriptSerializer().Serialize(user) + ")";

这样返回给前端的就是类似这种jQuery17104721....('{Name:"jxq", Email:"feichexia@yahoo.com.cn"}'),它一返回到前端就会执行,得到的是一个JavaScript对象,对象有两个属 性:Name和Email,所以我们可以直接调用json.Name和json.Email

通过此文,希望能帮助大家学习掌握此部分知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
js获取客户端网卡的IP地址、MAC地址
Mar 26 Javascript
jQuery is()函数用法3例
May 06 Javascript
一个检测表单数据的JavaScript实例
Oct 31 Javascript
jQuery的css()方法用法实例
Dec 24 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
PhotoSwipe异步动态加载图片方法
Aug 25 Javascript
Node.js编写CLI的实例详解
May 17 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
vue项目如何刷新当前页面的方法
May 18 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
javascript的函数劫持浅析
Sep 26 #Javascript
JavaScript中this的四个绑定规则总结
Sep 26 #Javascript
jQuery 选择器(61种)整理总结
Sep 26 #Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 #Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 #Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 #Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 #Javascript
You might like
PHP开发中常用的8个小技巧
2008/08/27 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php生成随机密码的三种方法小结
2010/09/04 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
PHP垃圾回收机制引用计数器概念分析
2013/06/24 PHP
两款万能的php分页类
2015/11/12 PHP
PHP检测链接是否存在的代码实例分享
2016/05/06 PHP
JS性能优化笔记搜索整理
2013/08/21 Javascript
前台js对象在后台转化java对象的问题探讨
2013/12/20 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JS实现图片上传预览功能
2016/11/21 Javascript
基于Marquee.js插件实现的跑马灯效果示例
2017/01/25 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
Python爬虫DOTA排行榜爬取实例(分享)
2017/06/13 Python
Python编程实现两个文件夹里文件的对比功能示例【包含内容的对比】
2017/06/20 Python
Django后台获取前端post上传的文件方法
2018/05/28 Python
python函数与方法的区别总结
2019/06/23 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
什么是规则表达式
2012/05/03 面试题
多媒体编辑专业毕业生推荐信
2013/11/05 职场文书
户外拓展活动方案
2014/02/11 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
pytorch显存一直变大的解决方案
2021/04/08 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫