• Jsonp 前后端交互操作


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

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

          

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

           

     public class LinyangController : Controller
        {
            //
            // GET: /Linyang/
            public ActionResult Index()
            {
                Person person = new Person();
                person.age = 23;
                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+");");

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

  • 相关阅读:
    Job for vsftpd.service failed because the control process exited with error code
    Linux 调优方案, 修改最大连接数-ulimit
    vsftpd配置文件详解
    Linux下TCP最大连接数受限问题
    vsftp限制FTP用户只能访问自己的目录
    linux YUM常用 命令
    Linux 系统sudo命令
    部分有关 广告联盟作弊 与反作弊资料收集
    Boosted Tree
    如何将数据转换libsvm格式文件
  • 原文地址:https://www.cnblogs.com/linxiaoyang/p/4180771.html
Copyright © 2020-2023  润新知