在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 相关文章推荐
JavaScript中的Location地址对象
Jan 16 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
vue结合element-ui使用示例
Jan 24 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
node-red File读取好保存实例讲解
Sep 11 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
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
php画图实例
2014/11/05 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
laravel 使用auth编写登录的方法
2019/09/30 PHP
jQuery控制iFrame(实例代码)
2013/11/19 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
完美解决IE9浏览器出现的对象未定义问题
2016/09/29 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
vue弹窗消息组件的使用方法
2020/09/24 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
vue自动添加浏览器兼容前后缀操作
2020/08/13 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Numpy数组的广播机制的实现
2020/11/03 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
UNIX文件类型
2013/08/29 面试题
办公室内勤工作职责
2013/12/11 职场文书
中学实习教师自我鉴定
2013/12/12 职场文书
三好生演讲稿
2014/09/12 职场文书
中秋节晚会开场白
2015/05/29 职场文书
药房管理制度范本
2015/08/06 职场文书
校园广播稿范文
2015/08/19 职场文书
小学数学教师研修感悟
2015/11/18 职场文书
2016优秀护士求职自荐信
2016/01/28 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题