今天，因为项目的需要，研究了一下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. Javascript获取URL地址变量参数值的方法

    今天碰到在做一个动态页面的时候,需要用到 URL 的参数值来作判断,从而决定某一块内容在当前页面是否显示.例如exampe.html?parm1=xxx&parm2=xxx&parm3 ...

  2. WPF DataGrid 操作列 类似 LinkButton

    WPF中没有类似LinkButton,所以只有运用Button及样式来实现LinkButton. DataGrid 操作列 实现 多个类似LinkButton按钮: 具体实现代码如下: <Dat ...

  3. libjpeg 交叉编译动态库和静态库

    1.下载libjpeg库,解压之     得到了jpeg6b和libtool-2.2.4两个文件夹. 2.编译安装libtool工具.   这是配置libtool,这里需要注意:configure 参 ...

  4. Different ways to invoke a shared object/share library(.so)

    在Linux中调用.so文件的方法有几种. 1.直接在编译的时候链接上. 2.dlopen/???

  5. 【风马一族_Android】第4章Android常用基本控件

    第4章Android常用基本控件 控件是Android用户界面中的一个个组成元素,在介绍它们之前,读者必须了解所有控件的父类View(视图),它好比一个盛放控件的容器. 4.1View类概述 对于一个 ...

  6. ADO.NET笔记——基本概念

    ADO.NET中的主要对象: Connection:连接对象.用于建立从应用程序到数据库服务器指定数据库的连接通道 Command:命令对象.用于执行增删查改等数据库语句命令 DataReader:数 ...

  7. WCF 服务与终结点（四）

    服务 服务是一组公开功能的集合. 服务内部包含了如语言.技术.版本与框架等概念,服务之间的交互只允许使用规定的通信模式 外界客户端并不知道服务内部的实现细节,所以WCF服务通常通过元数据的方式描述可用 ...

  8. Silverlight动画的基本知识、关键帧动画

    基础知识 (一)动画:是快速播放一系列图像(其中每个图像与下一个图像略微不同)给人造成的一种幻觉 (二)动画类型:两类    (1)From/To/By动画:在起始值和结束值之间进行动画处理.     ...

  9. .Net平台Winform两个ComboBox控件绑定同一个数据源

    今天WINFROM编程遇到这么一个问题:是有关WINFORM中两个comboBox控件绑定同一个数据源的问题,在窗体的界面上有两个comboBox,我在Form1_Load中对他们做了数据绑定(具体代 ...

  10. CLR via C# 计算限制的异步操作读书笔记

    1. 使用线程池搪行简单的计算限制操作 ThreadPool.QueueUserWorkItem(WaitCallback callback) 2.CLR默认情况下自动使初始线程的执行上下文流向辅助线 ...