jquery使用jsonp进行跨域调用

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: 小  |  中  |  大  |  超大  

关于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

returnView();

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

returnContent(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

functionSendData()

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

functionSendData() {

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

functionreceive(data) {

20

alert(data.age);

21

}

22

</script>

 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
© 2005- 王朝網路 版權所有 導航