今天，因为项目的需要，研究了一下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 前后端交互操作的更多相关文章

  1. Node之简单的前后端交互

    node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...

  2. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

  3. springboot+mybatis+thymeleaf项目搭建及前后端交互

    前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...

  4. 百度ueditor的图片上传，前后端交互使用

    百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...

  5. 【开源.NET】 轻量级内容管理框架Grissom.CMS（第二篇前后端交互数据结构分析）

    这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...

  6. Servlet实现前后端交互的原理及过程解析

    在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...

  7. nodejs实现前后端交互

    本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...

  8. ajax学习----json，前后端交互，ajax

    json <script> var obj = {"name": "xiaopo","age": 18,"gender ...

  9. 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互

    说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...

随机推荐

  1. STP详解

    STP详解 Write From YangWj Wednesday, March 5, 2014 一. 生成树协议 STP的主要任务是阻止在第2层网络(网桥或交换机)产生网络环路,它警惕的监视着网络中 ...

  2. 表情键盘及文字表情识别简单demo

    1.前言 了解了简单图文混排 (属性字符串的使用)及 正则表达式的部分知识,为了加深印象,写了个简单表情键盘demo 展示文字用的是 UITextView 由于时间匆忙,存在一些bug,以及不完善的地 ...

  3. ios之UITableViewController(二) tableView的编辑模式

    tableView的编辑模式 表视图可以进入编辑模式,当进入编辑模式就可以进行删除.插入.移动单元等操作 效果图: 让表视图进入编辑模式,进入编辑模式的方法有两种,一种是使用导航栏的edit 按钮,另 ...

  4. Objective-C 【protocol-协议 的了解使用】

    ------------------------------------------- protocol(协议) (1)引文:OC中的protocol和Java中的接口(interface)比较类似, ...

  5. 第一次使用easyUI

    一.项目结构图 二.在WebContent下新建resource文件夹,在resource底下创建easyui.将easyUI包放入其中. 三.在springMVC-servlet.xml写入资源路径 ...

  6. java中Map,List与Set的区别

    Set,List,Map的区别 java集合的主要分为三种类型: Set(集) List(列表) Map(映射) 要深入理解集合首先要了解下我们熟悉的数组: 数组是大小固定的,并且同一个数组只能存放类 ...

  7. Mentor PADS 9.5下载安装及破解指南

    Pads,是一款用于设计.模拟电子线路及设计电路板的电脑软件,原由Innoveda公司开发,其后改名为PowerPCB,在2002年4月Innoveda被Mentor Graphics收购,近年再次改 ...

  8. Eclipse 运行多个Tomcat实例

             

  9. js中隐式类型转换测试

    javascript数据类型: 使用typeof可以返回的数据类型有六种 "number" , "string" ,  "boolean" ...

  10. Linq中延迟查询和立即查询

    //立即查询 public static void NowExecute() { var results = new int[]{5,4,3,2,1,6,7,8,9,0 }; int i = 0; v ...