在jquery中的ajax方法怎样通过JSONP进行远程调用


Posted in Javascript onApril 04, 2014

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用

首先介绍下$.ajax的参数
type:请求方式 GET/POST
url:请求地址
async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步。
dataType:返回的数据类型
jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
success:调用成功执行的函数
error:异常处理函数

1.示例1
服务器端我们采用MVC的ACTION来返回数据

public class HomeController : Controller 
{ 
// 
// GET: /Home/ public ActionResult Index() 
{ 
returnView(); 
} 
public ActionResult ReturnJson() 
{ 
string callback = Request.QueryString["callback"]; 
string json = "{'name':'张三','age':'20'}"; 
string result = string.Format("{0}({1})", callback, json); 
returnContent(result); 
} 
}

客户端使用jsonp来传输数据
@{ 
ViewBag.Title = "Index"; 
Layout = "~/Views/Shared/_Layout.cshtml"; 
} <script src="~/Scripts/jquery-1.7.1.min.js"type="text/javascript"> </script> 
<script type="text/javascript"> 
functionSendData() 
{ 
$.ajax({ 
type: "get", 
async: false, 
url: "/home/ReturnJson", 
dataType: "jsonp", 
success: function(data){ 
alert(data.name); 
}, 
error: function(){ 
alert('fail'); 
} 
}); 
} 
</script> 
<input type="button" value="提交" onclick="SendData();"/>

点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了

2.自定义函数名
可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。
jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]
jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。

<script type="text/javascript"> 
functionSendData() { 
$.ajax({ 
type: "get", 
async: false, 
url: "/home/ReturnJson", 
dataType: "jsonp", 
jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) 
jsonpCallback: "receive",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 
success: function(data) { 
alert(data.name); 
}, 
error: function() { 
alert('fail'); 
} 
}); 
} functionreceive(data) { 
alert(data.age); 
} 
</script>
Javascript 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
jQuery寻找n以内完全数的方法
Jun 24 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
Jquery获取radio选中的值
May 05 jQuery
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
vue router的基本使用和配置教程
Nov 05 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
JavaScript数组类型Array相关的属性与方法详解
Sep 08 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
javascript中的循环语句for语句深入理解
Apr 04 #Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
Apr 04 #Javascript
调试代码导致IE出错的避免方法
Apr 04 #Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 #Javascript
js 显示base64编码的二进制流网页图片
Apr 04 #Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 #Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
PHP中实现中文字符进制转换原理分析
2011/12/06 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
php如何利用pecl安装mongodb扩展详解
2019/01/09 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
JS隐藏参数post传值实例
2013/04/18 Javascript
js给页面加style无效果的解决方法
2014/01/20 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
2016/01/26 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
详解为什么Vue中不要用index作为key(diff算法)
2020/04/04 Javascript
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
Vue自定义全局弹窗组件操作
2020/08/11 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
详解python单例模式与metaclass
2016/01/15 Python
使用python为mysql实现restful接口
2018/01/05 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
使用sklearn之LabelEncoder将Label标准化的方法
2018/07/11 Python
Pycharm 安装 idea VIM插件的图文教程详解
2020/02/21 Python
python代码实现TSNE降维数据可视化教程
2020/02/28 Python
HTML5标签大全
2016/11/23 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
KIKO MILANO英国官网:意大利知名化妆品和护肤品品牌
2017/09/25 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
老干部工作先进集体事迹材料
2014/05/21 职场文书
2015年推普周活动总结
2015/03/27 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
求职信如何撰写?
2019/05/22 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL