码迷,mamicode.com
首页 > Web开发 > 详细

菜鸟的 asp.net jsonp简单应用

时间:2015-10-18 22:51:55      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

简单介绍下,jsonp是一种用来进行跨域传输信息的方法,不是json的亲戚。

 

具体方法如下

客户端:

 1                 $.ajax({
 2                     url: "testPage.aspx",
 3                     jsonp: "callback",
 4                     type: "get",
 5                     dataType: "jsonp",
 6                     data: { "studentCode": "5", "batch": "2001" },
 7                     success: function (result) {
 8                         alert(result.message);
 9                     },
10                     error: function () {
11                         alert("发送失败");
12                     }
13                 });

看起来只是像普通的ajax方法,不过里面加上了回传函数的方法名“jsonp”参数

这是用来用jsonp的形式回传信息用的,jquery会根据这个callback参数取其中的内容。

 

客户端方法:

        protected void Page_Load(object sender, EventArgs e)
        {
            string studentCode = Request.QueryString["studentCode"];
            string batch = Request.QueryString["batch"];
            string callback = Request.QueryString["callback"];

            var msg = new {message="收到!" };
            string result = new JavaScriptSerializer().Serialize(msg);
            Response.Write(callback+"("+result+")" );
        }

注意在使用jsonp的时候要注意接收 ajax中写好的方法名参数,刚才上面写的是"jsonp:‘callback‘"所以在服务端要取callback

在回传的时候要以  ajax中的jsonp参数+(+结果值+) 的形式返回,

 

运行一下刚才的网页,会发现jquery会以

testPage?callback=jQuery110207458065936286827_1445175684208&studentCode=5&batch=2001&_=1445175684213 HTTP/1.1

的方式像服务端发送请求,此时jquery已经将callback值写好

callback=jQuery110207458065936286827_1445175684208

这样jsonp就可以正常工作了

 

注意:

我在刚用ajax的时候没有注意大小写,$.ajax()方法的参数名对大小写还是很敏感的,尤其是dataType,一定要Type大写data小写

否则会不起作用,怎么写都回传的是字符串格式。当时还疑惑为啥别人回传jsonp是json格式 result.message就可以取值了,而我写的

jsonp返回来的是callback(result:message),当时就是写的datatype的结果。

 

注意返回值一定是json格式,并且在断点调试的时候 获得的jsonp参数值也就是上面的callback,一定能够取到值类似"jQuery110207458065936286827_1445175684208",而不是 null,如果是null 那么说明你的ajax方法写的有问题,赶紧去贴个

方法再试试,否则会走很多弯路。

 

菜鸟的 asp.net jsonp简单应用

标签:

原文地址:http://www.cnblogs.com/stupidanimal/p/4890481.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!