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

欢迎拍砖啊，呵呵。

评论

35 楼 Puras 2010-04-26  

使用SpringMVC替换Struts么？
思路挺好的。
不过还是没有去掉中间的一层。
而且我想，也去不掉的

34 楼 DoubleEO 2010-04-26  

andot 写道

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

一直在用Idea，确实比eclipse强多了....没事，盗版呗，myeclipse也收费呢，谁买了，一样的

33 楼 DoubleEO 2010-04-26  

这不是SpringMVC吗？前面用jsp+ajax挺好的，后面spring+orm,一直这么做的...

32 楼 Angel_Night 2010-04-25  

andot 写道

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

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

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

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

31 楼 gfghgi 2010-04-25  

前台 调后台方法时 最好 能有ide支持,按api 自动给出代码 ,,,像调 webservice 那样,,

30 楼 andot 2010-04-25  

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

29 楼 luojy8877 2010-04-25  

我对lz说的不用JSP的理解是  页面所有数据都通过ajax去取。 我个人没有实践过整个项目所有页面的数据都通过ajax获取  想听听大家的看法。  不过我们现在在做的网站也有这样的打算  不少页面也都用ajax去获取数据。不过有一点可以肯定 如果所有页面都用ajax  前端开发一定非常郁闷  他的工作量会大大增加  呵呵

28 楼 niyong 2010-04-25  

可否把整个工程都上传上来？我们研究一下

27 楼 Angel_Night 2010-04-25  

不复记忆 写道

struts杯具了？

目前网络带来的评论给我的直观感受就是 1 2 都杯具...

不过我又想起另外一句话...
"把时髦的技术挂在嘴边，还不如把过时的技术记在心里。"

26 楼 不复记忆 2010-04-25  

struts杯具了？

25 楼 Vampiredx 2010-04-24  

完全使用jquery做数据展现的时候，还是很麻烦的，各种词典，形式转换。Java在这方面优势很明显的，很难被取代。主要是在数据展示方面，根据需求变动很大，方式种类很多。

24 楼 Angel_Night 2010-04-24  

qiren83 写道

seo怎么办

一个企业的oa需要seo么...


而且优秀的搜索引擎不会处理不了这些的
不优秀的正好屏蔽了...比如javaeye就把雅虎之流屏蔽了..

23 楼 qiren83 2010-04-24  

seo怎么办

22 楼 jidilangzi603 2010-04-24  

用spring MVC在返回到页面上的时候还是比较简单的呀，
希望跟json结合起来用有事半功倍的效果！

21 楼 Angel_Night 2010-04-24  

yiyu 写道

godson_2003 写道

楼主的服务器端验证是咋做的啊？

这里主要是考虑的前端和后端分开以及尽量少地使用各种技术（摒弃jsp和struts），后台验证还没考虑，你有什么好想法吗？

首先服务器端验证这个问题

我做的项目不少了...基本没用过服务器端验证..都是项目吗...没那种要求.
与数据库交互的验证也都是用ajax做的

至于如果一定要用..其实hibernate本身也提供了对数据校验的功能吧
虽然把数据校验放到那个位置不一定合适,,但是至少也算是一种选择吧

20 楼 godson_2003 2010-04-24  

yiyu 写道

godson_2003 写道

楼主的服务器端验证是咋做的啊？

这里主要是考虑的前端和后端分开以及尽量少地使用各种技术（摒弃jsp和struts），后台验证还没考虑，你有什么好想法吗？

没有。因为没有找到好的后台验证框架 所以一直在用Struts2，如果有好用的验证框架 Struts2、SpringMVC估计都可以抛弃了

19 楼 nogocn 2010-04-24  

看了下思路，应该称赞有想法，但是在js里面还要写一大堆的绑定值。如下：
$('div#responseName').text(data.name); 
customer.setName(customer.getName())

这样大大增加了不必的开发的工作量。

18 楼 yiyu 2010-04-24  

godson_2003 写道

楼主的服务器端验证是咋做的啊？

这里主要是考虑的前端和后端分开以及尽量少地使用各种技术（摒弃jsp和struts），后台验证还没考虑，你有什么好想法吗？

17 楼 godson_2003 2010-04-24  

楼主的服务器端验证是咋做的啊？

16 楼 edgar615 2010-04-24  

最近开始看spring3，准备尝试下spring mvc