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


Posted in Javascript onMay 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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
JavaScript的继承的封装介绍
Oct 15 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Jquery获取radio选中的值
May 05 jQuery
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
JavaScript实现的DOM绘制柱状图效果示例
Aug 08 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
Vuex的actions属性的具体使用
Apr 14 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
May 04 #Javascript
将HTML的左右尖括号等转义成实体形式的两种实现方式
May 04 #Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 #Javascript
元素未显示设置width/height时IE中使用currentStyle获取为auto
May 04 #Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 #Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 #Javascript
使用JavaScript获取电池状态的方法
May 03 #Javascript
You might like
php 批量替换程序的具体实现代码
2013/10/04 PHP
md5 16位二进制与32位字符串相互转换示例
2013/12/30 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
如何实现iframe(嵌入式帧)的自适应高度
2006/07/26 Javascript
用js实现手把手教你月入万刀(转贴)
2007/11/07 Javascript
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
2015/08/04 Javascript
JavaScript基础知识及常用方法总结
2016/01/10 Javascript
JavaScript基于原型链的继承
2016/06/22 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
基于JavaScript实现随机颜色输入框
2016/12/10 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
JS实现提示效果弹出及延迟隐藏的功能
2019/08/26 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
python中sys.argv参数用法实例分析
2015/05/20 Python
python的paramiko模块实现远程控制和传输示例
2017/10/13 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
通过cmd进入python的步骤
2020/06/16 Python
详解python定时简单爬取网页新闻存入数据库并发送邮件
2020/11/27 Python
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
关于运动会广播稿50字
2014/10/18 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
离婚协议书格式
2015/01/26 职场文书
安全教育主题班会教案
2015/08/12 职场文书
2016年村党支部公开承诺书
2016/03/24 职场文书
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
2021/04/29 HTML / CSS