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. 先从前台提交数据开始，关键代码如下：

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扩展，代码如下：

$.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的接收。
后台主要的代码如下：

@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的设置如下：

<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中这样写：

<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数据就可以了。

欢迎拍砖啊，呵呵。

评论

55 楼 gaobusi 2011-08-17  

不错的案例！！！需要顶！！！！

54 楼 yiyu 2010-09-09  

nick216 写道

楼主还能上传一下工程啊

也让小弟学习学习

请看你楼上的说明。

53 楼 nick216 2010-09-08  

楼主还能上传一下工程啊

也让小弟学习学习

52 楼 yiyu 2010-05-25  

源码请参见我后续的帖子：
jquery<--json-->spring(3.0)之后台校验

51 楼 香烟与酒 2010-05-25  

有没有源码啊,发给我下,谢谢了  [e-mail]

50 楼 香烟与酒 2010-05-25  

有没有源码呢

49 楼 Angel_Night 2010-05-07  

yiyu 写道

其实我想做的是把美工、数据展示、业务逻辑分开，以前开发人员一把抓，java、javascript、html、css都要涉及，这没必要，使用这种方式，可以美工人员只管html、css，前台开发只管javascript，后台人员专注于java就行了，至于使用struts还是springMVC，是用jquery还是ext，都不是问题
另外，前台需要什么数据就传什么数据，没必要和po保持一致的。

把职责划分明确 对于量化工作 和提供工作质量 都有很大的帮助

48 楼 yiyu 2010-05-07  

其实我想做的是把美工、数据展示、业务逻辑分开，以前开发人员一把抓，java、javascript、html、css都要涉及，这没必要，使用这种方式，可以美工人员只管html、css，前台开发只管javascript，后台人员专注于java就行了，至于使用struts还是springMVC，是用jquery还是ext，都不是问题
另外，前台需要什么数据就传什么数据，没必要和po保持一致的。

47 楼 micropang 2010-05-07  

我也来参合两句吧，不知道算不算是经验之谈，希望能有与我同样感受的仁人~~

首先不得不说LZ的这个Demo确实让人进入了一种简介的世界，这事咋看起来的^_^

其实不管是Struts2.0还是Webwork，这个对我的所有开发来说，它的作用仅是一个控制访问、JSON序列化成VO对象以及输出字符串（JSON值），当然你可以做些后台认证，不过我几乎没使用过（前台Ext有控制，后台有同一抛出错误）；因为这一层涉及到控制请求哪一种业务，所以在我看来这一层不应该少，也没这个必要，因为它确实还有他存在的空间；比如：后台Spring层做了一个业务处理，然后前台需要多个不同的访问路径，每个访问路径针对每个地区地市开设的（当然很多人认为这可以通过只设置一个URL，然后后面加个变量代表地区地市，呵呵，这个还真做不到~~），这时不知道大家怎么处理，我的解决办法是：通过在配置文件里做文章，再有Struts层来控制访问

接着个问题，也仅是抛砖引玉，如果：A表，B表，C表；A对B是一对多的关系，B对C是一对多的关系，当查出一个A记录PO时，对应A的B记录PO集会出来，还有对应B的C记录的PO集也会跟着出来，如果此时LZ的方式返回了这个A记录（哪怕是从PO->VO），此时的JSON值会不会包含B和C的记录在里面，如何包含，可想这不是理想状态，要是后面跟着更多从表嗫？？因为又是我们只需要到第一级或是第二级的从表而已，不要后面太多的从表；当然后还有就是返回来的情况，当查出一个B记录时，它对应A的父表也出来，结果A又回到了刚才说的A->B->C这一大堆数据跟着，其中似乎都存在很多问题，貌似中间还存在个死循环，我是在开发中遇到了

唠叨N句话，希望我也能从大家多多提些想法，最后就是我用的是Ext做前台~~

46 楼 wuliaolll 2010-04-27  

我觉得struts2还是不杯具的。

struts2也能做类似的映射，处理json也很方便，甚至不需要json，更重要的是灵活。

45 楼 andot 2010-04-27  

Angel_Night 写道

andot 写道

Angel_Night 写道

andot 写道

你用这个还需要多一个spring，发布的方法也还需要单独编写，配置也不算少。如果换成Hprose的话，也是纯html调用后台程序，不需要任何框架，直接配置一个现成的servlet就可以发布已经写好的类或对象（这些类和对象跟在后端可以直接使用的对象没有任何区别），跟js交互方式是直接js调用服务器方法，更直观更方便，可以传对象和复杂数据。前端可以配合jquery、ext、edojs等任何纯js框架来构建界面。比用这个方式不知道要方便高效多少倍呢。

是啊 要高效多少倍呢...

光买Hprose就不少钱..
还得招会Hprose的程序员 又需要多少?

idea比eclipse好多少倍呢...但是收费 不一样白扯么(虽然现在有社区版了)

收费不是个问题，只要这个投入是值得的，就会有人购买。另外，Hprose根本就不需要单独去招会的程序员，任何一个程序员只需要10分钟就可以掌握使用。
iphone开发上架卖是要花钱的，开发还需要有一台苹果电脑加一部iphone，还要经过苛刻的审核，但iphone上的程序却是最多的，开发iphone程序的人也是趋之若鹜。而其它的那些免费的基于linux的手机开发倒是免费的，可是那些程序有iphone上的多吗？健康的产业链不是靠免费来构建起来的，只有大家都获益才是健康的。

iPhone 和 技术选型有关联么?
用不用Hprose和产业链根本不搭边...

如果我用Hprose开发,有人会买么?
我用spring就没人买?
买的人 在意你拿什么开发么?

而iPhone上卖个1 2美元的小东西,一不小心变成百万富翁了...冲的钱去的

你用Hprose开发，那么在开发速度上快于使用Spring，可以让你的产品更快速上线，自然你就很容易超过你的竞争对手，当然钱自然也就来了。买你产品的客户当然不会看你拿什么开发，客户在意的是你的产品是不是够好，够不够快，还有就是你是不是比你的对手更早的占领市场。

44 楼 Angel_Night 2010-04-27  

认真看了下coralsea的代码

的确是截然不同的两种交互方式啊

而且jTemplate感觉用起来也不会很难...
多谢了 完全把我领入另外一种全新开发模式了 真的非常感谢

43 楼 coralsea 2010-04-27  

luojy8877 写道

Angel_Night 写道

coralsea 写道

其实Form也可以不用的，我用纯HTML,Ajax做前台5年了，前后逻辑功能区分非常清楚，至少不再有JS/Scriptlet交织在一起的情况出现了

那如何优雅得解决 服务器端数据 展示 到html...

毕竟做了五年这方面的东西,经验肯定很丰富,能否分享一下呢?

感觉用getElementById或者用JavaScriptLib的便捷方式取到以后设值,很不舒服
即使封装一下也觉得不得劲..

同问 啥都靠js填会不会太累 难道老哥已然形成一套框架 

框架谈不上，不过攒了一些代码，这里有个简单的demo
Ajax和Form可以说是截然不同的两种交互方式，他们的区别就不说了。在使用上肯定也不应该采用同样的方式。
说穿了JSP也不过就是一个模版引擎而已，同样的引擎还有Freemarker，velocity等等很多。如果采用Ajax，同样可以在前台使用模版引擎，在我的Demo里面就用到了jTemplate（Ext最早提供了js模版引擎）

42 楼 Angel_Night 2010-04-26  

andot 写道

Angel_Night 写道

andot 写道

你用这个还需要多一个spring，发布的方法也还需要单独编写，配置也不算少。如果换成Hprose的话，也是纯html调用后台程序，不需要任何框架，直接配置一个现成的servlet就可以发布已经写好的类或对象（这些类和对象跟在后端可以直接使用的对象没有任何区别），跟js交互方式是直接js调用服务器方法，更直观更方便，可以传对象和复杂数据。前端可以配合jquery、ext、edojs等任何纯js框架来构建界面。比用这个方式不知道要方便高效多少倍呢。

是啊 要高效多少倍呢...

光买Hprose就不少钱..
还得招会Hprose的程序员 又需要多少?

idea比eclipse好多少倍呢...但是收费 不一样白扯么(虽然现在有社区版了)

收费不是个问题，只要这个投入是值得的，就会有人购买。另外，Hprose根本就不需要单独去招会的程序员，任何一个程序员只需要10分钟就可以掌握使用。
iphone开发上架卖是要花钱的，开发还需要有一台苹果电脑加一部iphone，还要经过苛刻的审核，但iphone上的程序却是最多的，开发iphone程序的人也是趋之若鹜。而其它的那些免费的基于linux的手机开发倒是免费的，可是那些程序有iphone上的多吗？健康的产业链不是靠免费来构建起来的，只有大家都获益才是健康的。

iPhone 和 技术选型有关联么?
用不用Hprose和产业链根本不搭边...

如果我用Hprose开发,有人会买么?
我用spring就没人买?
买的人 在意你拿什么开发么?

而iPhone上卖个1 2美元的小东西,一不小心变成百万富翁了...冲的钱去的

41 楼 andot 2010-04-26  

Angel_Night 写道

andot 写道

你用这个还需要多一个spring，发布的方法也还需要单独编写，配置也不算少。如果换成Hprose的话，也是纯html调用后台程序，不需要任何框架，直接配置一个现成的servlet就可以发布已经写好的类或对象（这些类和对象跟在后端可以直接使用的对象没有任何区别），跟js交互方式是直接js调用服务器方法，更直观更方便，可以传对象和复杂数据。前端可以配合jquery、ext、edojs等任何纯js框架来构建界面。比用这个方式不知道要方便高效多少倍呢。

是啊 要高效多少倍呢...

光买Hprose就不少钱..
还得招会Hprose的程序员 又需要多少?

idea比eclipse好多少倍呢...但是收费 不一样白扯么(虽然现在有社区版了)

收费不是个问题，只要这个投入是值得的，就会有人购买。另外，Hprose根本就不需要单独去招会的程序员，任何一个程序员只需要10分钟就可以掌握使用。
iphone开发上架卖是要花钱的，开发还需要有一台苹果电脑加一部iphone，还要经过苛刻的审核，但iphone上的程序却是最多的，开发iphone程序的人也是趋之若鹜。而其它的那些免费的基于linux的手机开发倒是免费的，可是那些程序有iphone上的多吗？健康的产业链不是靠免费来构建起来的，只有大家都获益才是健康的。

40 楼 yiyu 2010-04-26  

个人觉得用jsp显示数据是要刷新页面的，而js则不同
这样一方面用户体验要好一些，另外也可以更好地把前端开发和后台开发分开，至少两边使用的是不同的文件

39 楼 luojy8877 2010-04-26  

Angel_Night 写道

coralsea 写道

其实Form也可以不用的，我用纯HTML,Ajax做前台5年了，前后逻辑功能区分非常清楚，至少不再有JS/Scriptlet交织在一起的情况出现了

那如何优雅得解决 服务器端数据 展示 到html...

毕竟做了五年这方面的东西,经验肯定很丰富,能否分享一下呢?

感觉用getElementById或者用JavaScriptLib的便捷方式取到以后设值,很不舒服
即使封装一下也觉得不得劲..

同问 啥都靠js填会不会太累 难道老哥已然形成一套框架 

38 楼 曾经de迷茫 2010-04-26  

只问为什么要放弃 jsp？
纯粹跟风

37 楼 Angel_Night 2010-04-26  

coralsea 写道

其实Form也可以不用的，我用纯HTML,Ajax做前台5年了，前后逻辑功能区分非常清楚，至少不再有JS/Scriptlet交织在一起的情况出现了

那如何优雅得解决 服务器端数据 展示 到html...

毕竟做了五年这方面的东西,经验肯定很丰富,能否分享一下呢?

感觉用getElementById或者用JavaScriptLib的便捷方式取到以后设值,很不舒服
即使封装一下也觉得不得劲..

36 楼 coralsea 2010-04-26  

其实Form也可以不用的，我用纯HTML,Ajax做前台5年了，前后逻辑功能区分非常清楚，至少不再有JS/Scriptlet交织在一起的情况出现了