jquery(1.3.2)<--json-->spring(3.0)
发现spring 3已经对ajax支持的很好了,前端可以只使用html+jquery,后端
只使用spring再加上一种orm,两者之间用json交换数据就可以了,现在是放弃
jsp,struts这些已经显得累赘的技术的时候了。
出于这种想法,我做了个小试验,其中之所以选择jquery 1.3.2是因为jquery
ui 1.8还不是稳定版,而稳定版1.7是基于jquery 1.3+的。
1. 先从前台提交数据开始,关键代码如下:
Javascript代码
function save() {
var elemUserinfo = $('#customerInfo');
var userinfo = elemUserinfo.serializeObject();
var jsonuserinfo = JSON.stringify(userinfo);
jQuery.ajax({
type : 'POST',
contentType : 'application/json',
url : 'customerInfo/new.do',
data : jsonuserinfo,
dataType : 'json',
success : function(data){
$('div#responseName').text(data.name);
$('div#responseAddr').text(data.addr);
},
error : failed
});
}
其中customerInfo是一个form的id,该form包含两个text input,name分别为name和addr,
serializeObject是一个网上比较流行的将form数据组装成json对象的juery扩展,代码如下:
Javascript代码
$.fn.serializeObject = function() {
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [ o[this.name] ];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
将json对象转成String是用的json2(http://www.json.org/js.html)的JSON.stringify,提交
是用的jquery的ajax功能,注意要把contentType设为'application/json',这是为了后台spring
将其自动转化为vo对象用的。
关于返回值后面再说。
2. 然后说说后台spring的接收。
后台主要的代码如下:
Java代码
@Controller
@RequestMapping("/customerInfo")
public class CustomerInfoController {
@RequestMapping(value="/new", method = RequestMethod.POST)
@ResponseBody
public Customer newCustomer(@RequestBody Customer customer) {
customer.setName(customer.getName() + "经服务器修改");
customer.setAddr(customer.getAddr() + "经服务器修改");
return customer;
}
}
其中Controller,RequestMapping什么的就不多说了,简单的说就是前提交时指定的url(
customerInfo/new.do)就被spring转到这里来处理了,其中web.xml中spring的设置如下:
Xml代码
<servlet>
<servlet-name>test</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>test</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>
注意处理申请的函数的参数直接就是Customer对象(Customer是一个具有属性name和addr的vo),
而不是json字串,这里的关键是这样的,spring具有将数据转化后再交给controller的功能,spring 3
新增了对json的处理能力,是基于Jackson JSON Processor(http://jackson.codehaus.org/)的,
使用时要配置一下,在这个例子中默认的bean定义文件test-servlet.xml中这样写:
Xml代码
<bean
class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<util:list id="beanList">
<ref bean="mappingJacksonHttpMessageConverter" />
</util:list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter"
class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter" />
这样一来,spring在接收contentType为application/json的request时会自动将json字串间转换成期望
的java对象,同样,发送response时,contentType被设为application/json,并且将java对象转为json
字串。
3. 下面该说返回了
上面已经说到,spring自动将response进行json化,所以处理函数直接返回vo对象就可以了。
而在页面端,由于我们指定了dataType为json,所以jquery直接把接收到的json字串转成了javascript
对象,我们可以直接使用data.name的写法取得数据了。
简单吧,这样一来,开发中,可以由设计人员在需求分析的基础上专心用html制作页面,之后交到前端
开发人员手里,前端开发人员添加js代码,实现页面逻辑,后台人员专心于java,spring和orm,前后
端交换json数据就可以了。
jquery(1.3.2)<--json-->spring(3.0)的更多相关文章
- Jquery跨域获得Json
这两天用 Jquery 跨域取数据的时候,经常碰到 invalid label 这个错误,十分的郁闷,老是取不到服务器端发送回来的 json 值, 一般跨域用到的两个方法为:$.ajax 和$.get ...
- 通过Jquery中Ajax获取json文件数据
1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...
- jquery ajax调用返回json格式数据处理
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...
- (转)springMVC框架下JQuery传递并解析Json数据
springMVC框架下JQuery传递并解析Json数据 json作为一种轻量级的数据交换格式,在前后台数据交换中占据着非常重要的地位.Json的语法非常简单,采用的是键值对表示形式.JSON 可以 ...
- spring boot2.0(一 ) 基础环境搭建
1.基础配置 开发环境:window jdk版本:1.8(spring boot2.0最低要求1.8) 开发工具:eclipse 构建方式:maven3 2.POM配置文件 <project x ...
- 通过JQuery的$.ajax()把 json 数据 post 给 PHP
通过JQuery的$.ajax()把 json 数据 post 给 PHP时的几种情况: 无法在PHP中通过$_POST 以及 $_REQUEST 获取json数据,即 $json = $_POST[ ...
- Spring Boot2.0 整合 Kafka
Kafka 概述 Apache Kafka 是一个分布式流处理平台,用于构建实时的数据管道和流式的应用.它可以让你发布和订阅流式的记录,可以储存流式的记录,并且有较好的容错性,可以在流式记录产生时就进 ...
- spring boot 2.0(一)权威发布spring boot2.0
Spring Boot2.0.0.RELEASE正式发布,在发布Spring Boot2.0的时候还出现一个小插曲,将Spring Boot2.0同步到Maven仓库的时候出现了错误,然后Spring ...
- 【MVC model 验证失效 】【Unexpected token u in JSON at position 0】【jquery-plugin-validation】
问题描述:mvc model 调用jquery-plugin-validation 实现 前台的数据验证,时报错 Unexpected token u in JSON at position 0 很讨 ...
- Spring Boot2.0之 监控管理
Spring boot监控中心: 针对微服务的服务状态,服务器的内存变化(内存.线程.日志管理等)检测服务配置连接地址是否有用(有些懒加载的情况下,用的时候发现卧槽不能用)模拟访问,懒加载.统计有多少 ...
随机推荐
- 关于Java中计算日期差值不准确问题
1.字符串日期相减 如:2016-4-1,必须先将此字符串转成Date对象,并且, 格式必须为:yyyy—MM—dd HH:mm:ss. 如果不转就直接计算(2016-4-1)两个这样的日期,则误差 ...
- 使用runtime给类动态添加方法并调用 - class_addMethod
上手开发 iOS 一段时间后,我发现并不能只着眼于完成需求,利用闲暇之余多研究其他的开发技巧,才能在有限时间内提升自己水平.当然,“其他开发技巧”这个命题对于任何一个开发领域都感觉不找边际,而对于我来 ...
- c# SQL CLR 之一
CLR就是公共运行时,本文就对c#编写SQL StoredProcedures的过程进行简单讲解. [步骤] 2. 3. 7.打开设置 8. 注意删除方式:注意删除Assembly时,一定要先把引用此 ...
- unicode 汉字编码表
啊:21834 阿:38463 埃:22467 挨:25384 哎:21710 唉:21769 哀:21696 皑:30353 癌:30284 蔼:34108矮:30702 艾:33406 碍:308 ...
- 数据库设计(字段)中的char、varchar、text和nchar、nvarchar、ntext的区别
char.varchar.text和nchar.nvarchar.ntext的区别 1.CHAR.CHAR存储定长数据很方便,CHAR字段上的索引效率级高,比如定义char(10),那么不论你存储的数 ...
- 9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
- tomcat中的get、post区别
最近做一个项目,前台传到后台的数据是乱码.看着代码应该是正确的,但是就是有问题,然后请教了旁边的老司机才找到问题是什么.话不多说,下面是模拟情景的代码,其实也很简单,前台一个form表单,post ...
- OpenGL第6、7讲小结
因为内容比较多,所以只看了两讲(强行解释). 一讲讲了如何给各个面贴纹理,一讲讲了加光照和按键控制. 现在讲的都是给规则的面贴纹理,像正方形,刚好纹理图也是正方形,那像人物模型的衣服贴起来用代码控制得 ...
- USB接口介绍
USB设备系统分为两个部分,USB Host端和USB Device端,以USB接口的U盘为例子,U盘自身是一个USB Device,PC机的USB接口以及相关的控制电路为USB Host部分 ...
- 3月3日(6) Climbing Stairs
原题 Climbing Stairs 求斐波那契数列的第N项,开始想用通项公式求解,其实一个O(n)就搞定了. class Solution { public: int climbStairs(int ...