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 前后端交互操作的更多相关文章
- Node之简单的前后端交互
node是前端必学的一门技能,我们都知道node是用的js做后端,在学习node之前我们有必要明白node是如何实现前后端交互的. 这里写了一个简单的通过原生ajax与node实现的一个交互,刚刚学n ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
- springboot+mybatis+thymeleaf项目搭建及前后端交互
前言 spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护. 使用spring boot可以快速的开发出restful风格微服务架构. 本文将 ...
- 百度ueditor的图片上传,前后端交互使用
百度ueditor的使用 一个文本编辑器,看了网上很多文档写的很乱,这里拾人牙慧,整理下怎么使用. 这个东西如果不涉及到图片附件上传,其实很简单,就是几个前端文件,直接引用,然后配置下ueditor. ...
- 【开源.NET】 轻量级内容管理框架Grissom.CMS(第二篇前后端交互数据结构分析)
这是 CMS 框架系列文章的第二篇,第一篇开源了该框架的代码和简要介绍了框架的目的.作用和思想,这篇主要解析如何把sql 转成标准 xml 配置文件和把前端post的增删改数据规范成方便后台解析的结构 ...
- Servlet实现前后端交互的原理及过程解析
在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...
- nodejs实现前后端交互
本人nodejs入门级选手,站在巨人(文殊)的肩膀上学习了一些相关知识,有幸在项目中使用nodejs实现了前后端交互,因此,将整个交互过程记录下来,方便以后学习. 本文从宏观讲述nodejs实现前后端 ...
- ajax学习----json,前后端交互,ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
- 微信小程序 + thinkjs + mongoDB 实现简单的前后端交互
说明:这段时间跟老师学习了一下mongodb数据库,这次也是第一次搭建后台服务,出了不少差错,特此来复盘一下,非常感谢对我提供帮助的同学~ 一.使用 thinkjs + mongodb 创建后台服务 ...
随机推荐
- oracle中编写java代码
使用sql语句创建 create or replace and compile java source named test_java_source as package test_java_sour ...
- JAVA:三种集合LIST、SET、MAP
1. 集合框架介绍 我 们知道,计算机的优势在于处理大量的数据,在编程开发中,为处理大量的数据,必须具备相应的存储结构,数组可以用来存储并处理大量类型相同的数 据,但是会发现数组在应用中的限制:数组长 ...
- 7款经典炫酷的HTML5/jQuery动画应用示例及源码
jQuery是一款普遍受前端开发者欢迎的Javascript框架,但是开发者貌似更关注jQuery开发的插件,海量的jQuery插件让前端开发者非常方便.HTML5的加入让jQuery这个家族更加丰富 ...
- ThinkPHP中的模型二
ThinkPHP中的模型 1.为什么要创建数据对象 案例:使用ThinkPHP完成部门管理 ① 设计数据库 ② 创建Dept控制器 路径:./Application/Admin/Controller创 ...
- 孤岛能源安卓游戏android源码
孤岛能源是一个以孤岛为背景的模拟动作游戏,游戏中你的角色是 Android 机器人,目的是找到该岛上充满能量的能源造福人类.游戏中,你可以选择按键操作,也可以选择触摸操作.希望你能顺利完成任务. ...
- How to Fix Missing TortoiseSVN File Status Icons in Windows
For many Windows-based developers, Subversion and TortoiseSVN is a great source control solution. It ...
- JavaScript ES7 中使用 async/await 解决回调函数嵌套问题
原文链接:http://aisk.me/using-async-await-to-avoid-callback-hell/ JavaScript 中最蛋疼的事情莫过于回调函数嵌套问题.以往在浏览器中, ...
- html5离线应用详摘
html5离线应用详摘 在html文件里配置如下: <html manifest=”name.manifest”> 在name.manifest文件里配置如下: CACHE MANIFES ...
- Sorl之java操作
参考教程: http://www.cnblogs.com/xia520pi/p/3625232.html http://www.cnblogs.com/hujunzheng/p/5647896.htm ...
- C# CacheHepler Class
internal class CacheHelper { /// <summary> /// Insert value into the cache using /// appropria ...