Jsonp 前后端交互操作

今天，因为项目的需要，研究了一下JSONP,特在此记录一下，希望可以帮助那些有疑惑的朋友们，本人也是刚学，高手略过即可。

关于Jsonp的定义就不说了，网上一片，大家可以自己查询。我就在此直接进入正题。

首先，服务器端，我是用的.net 搭建的。下面是代码;

 public class LinyangController : Controller

    {

        //

        // GET: /Linyang/

        public ActionResult Index()

        {

            Person person = new Person();

            person.age = ;

            person.name = "linyang";

           String p= JsonConvert.SerializeObject(person);       //前天需要获取的json数据

           String callback = Request.QueryString["callback"].ToString();     //获取到URL中传递过来的callback中的值

           return Content(callback+"("+p+");");         //将获取的值同json数据拼接起来，中间以括号连接。格式：callback中的值+左括号+json数据+右括号。

        }

    }

简单的利用asp.net mvc 框架写的一个action。然后放到服务器上去。具体的解释，咱们待会再说。

客户端，用JSP充当的。利用了Jquery 或 Kissy(淘宝创造的JS框架，超级好用) 发起Ajax 跨域请求。

下面是，客户端代码：

<%--

  Created by IntelliJ IDEA.

  User: Administrator

  Date: 2014/12/22

  Time: 21:27

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

  <head>

    <title>我是首页</title>

    <script src="script/jquery-1.10.2.js"></script>

    <script src="http://g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>

  </head>

  <body>

      <button id="cross" >跨域获取值</button>

<%--<script>--%>

  <%--KISSY.use('io',function(S,IO){--%>

        <%--new IO({--%>

          <%--//type:'get',--%>

          <%--url:'http://120.192.31.164:8888/Linyang',--%>

          <%--dataType:'jsonp',--%>

          <%--jsonp:'callback',--%>

          <%--success:function(data){--%>

            <%--console.log(data.name);--%>

            <%--console.log(data.age);--%>

          <%--}--%>

        <%--});--%>

    <%--});--%>

<%--</script>--%>

      <script>

    $(document).ready(function(){

      $('#cross').on('click',function(){

        $.ajax({

          url:"http://120.192.31.164:8888/Linyang",

          dataType:'jsonp',

          jsonp:'callback',

          success:function(result) {

           alert(result.name);

          }

        });

      });

    });

  </script>

  </body>

</html>

大家可以看到，引入了两个脚本，一个是Jquary，另一个就是Kissy的，经测试，都能用，大家可以试一下。

现在可以具体的说一下了，咱们以Jquary为例，当你dataType声明为jsonp时，在请求的连接口面自动加上callback，当然这个参数名可以自己定义，就是通过jsonp这个属性来定义，这个名字，并不是没有意义的。请大家，注意这段代码：

String callback = Request.QueryString["callback"].ToString();

这是在服务器端，获取参数callback中的值，所以，前端定义的传递的是什么参数，后台就得是什么参数来获取。后台获取之后，放到返回的数据中，作为一个返回数据的“函数名”,前台就可以获取这个“函数名”,从来调用某个具体的函数来处理返回的数据，当然，如果前台不指定函数名，那么Jquary会默认加上一个，就可以使用success，来接受返回的数据。我上面就采用这种方式实现的。

PS:刚开始，一直获取不到，原来是

Content(callback+"("+p+");");

没有加左右括号，也再起提醒一下大家。

巴特西

Jsonp 前后端交互操作

最新文章

热门文章