jquery使用jsonp进行跨域调用
2018-06-17 20:51:04来源:未知 阅读 ()
关于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来返回数据
01 |
public class HomeController : Controller |
02 |
{ |
03 |
// |
04 |
// GET: /Home/ |
05 |
|
06 |
public ActionResult Index() |
07 |
{ |
08 |
return View(); |
09 |
} |
10 |
|
11 |
public ActionResult ReturnJson() |
12 |
{ |
13 |
string callback = Request.QueryString[ "callback" ]; |
14 |
string json = "{'name':'张三','age':'20'}" ; |
15 |
string result = string.Format( "{0}({1})" , callback, json); |
16 |
return Content(result); |
17 |
} |
18 |
|
19 |
} |
客户端使用jsonp来传输数据
01 |
@{ |
02 |
ViewBag.Title = "Index" ; |
03 |
Layout = "~/Views/Shared/_Layout.cshtml" ; |
04 |
} |
05 |
|
06 |
<script src= "~/Scripts/jquery-1.7.1.min.js" type= "text/javascript" > </script> |
07 |
<script type= "text/javascript" > |
08 |
function SendData() |
09 |
{ |
10 |
$.ajax({ |
11 |
type: "get" , |
12 |
async: false , |
13 |
url: "/home/ReturnJson" , |
14 |
dataType: "jsonp" , |
15 |
success: function (data){ |
16 |
alert(data.name); |
17 |
}, |
18 |
error: function (){ |
19 |
alert( 'fail' ); |
20 |
} |
21 |
}); |
22 |
} |
23 |
|
24 |
|
25 |
</script> |
26 |
|
27 |
<input type= "button" value= "提交" onclick= "SendData();" /> |
点击提交按钮后,发现服务器端的Request.QueryString["callback"]返回一个随机函数名。这样就被设置成JSONP格式来传递数据了
2.自定义函数名
可以在传递过程中自定义函数名,只要使用jsonpCallback参数就可以了。
jsonp:表示传递的参数,默认为callback,我们也可以自定义,服务器段通过此参数,获取自定义的函数名称,服务器这样获取 Request.QueryString["callback"]
jsonpCallback表示传递的参数值,也就是回调的函数名称,这是自定义的名称。
01 |
<script type= "text/javascript" > |
02 |
function SendData() { |
03 |
$.ajax({ |
04 |
type: "get" , |
05 |
async: false , |
06 |
url: "/home/ReturnJson" , |
07 |
dataType: "jsonp" , |
08 |
jsonp: "callback" , //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) |
09 |
jsonpCallback: "receive" , //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 |
10 |
success: function (data) { |
11 |
alert(data.name); |
12 |
}, |
13 |
error: function () { |
14 |
alert( 'fail' ); |
15 |
} |
16 |
}); |
17 |
} |
18 |
|
19 |
function receive(data) { |
20 |
alert(data.age); |
21 |
} |
22 |
</script> |
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:Kindeditor小改动
- Delphi10.3下自带系统托盘 TrayIcon的使用 2020-06-01
- delphi10.3安装使用mySQL 2020-05-31
- QF中间件 2020-02-04
- 人脸识别Demo 2019-08-29
- delphi使用Chilkat 组件和库从SFTP下载文件 2019-08-26
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash