`
yiyu
  • 浏览: 187961 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery(1.3.2)<--json-->spring(3.0)

    博客分类:
  • java
阅读更多
发现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

相关推荐

    t淘淘商城项目 商城项目 视频和源码教程 详细

    &lt;artifactId&gt;spring-context&lt;/artifactId&gt; &lt;version&gt;${spring.version}&lt;/version&gt; &lt;/dependency&gt; &lt;dependency&gt; &lt;groupId&gt;org.springframework&lt;/groupId&gt; &lt;artifactId&gt;spring-beans&lt;/artifactId&gt; &lt;version&gt;${...

    Struts2 + jQuery 实现ajax.txt

    - `spring-test-2.5.6.jar` - `struts2-core-2.1.8.jar` - `xwork-core-2.1.6.jar` - `json-lib-2.1.jar` - `struts2-json-plugin-2.1.8.jar` - `struts2-junit-plugin-2.1.8.jar` 此外,需要注意移除可能存在的旧...

    SSH等jar包

    │ spring-context-3.2.8.RELEASE.jar │ ├─mybatis │ mybatis-3.2.5.jar │ mysql-connector-java-5.1.8-bin.jar │ ├─SSH │ antlr-2.7.6.jar │ aopalliance.jar │ asm-attrs.jar │ asm.jar │ ...

    利用 FormData 对象和 Spring MVC 配合实现Ajax文件下载功能

    &lt;version&gt;1.3.2&lt;/version&gt; &lt;/dependency&gt; ``` 接下来,我们需要在前端创建一个用于选择文件的表单,并绑定一个点击事件来触发Ajax上传。以下是一个简单的HTML示例: ```html &lt;h1&gt;Ajax 文件下载&lt;/h1&gt; &lt;input type=...

    jquery easyui api

    在 `jquery-easyui-1.3.2` 压缩包中,包含了 EasyUI 的 CSS 和 JavaScript 文件,以及对应的示例代码。使用时,需要将这些资源引入到项目中,然后通过 jQuery 选择器和 EasyUI 的方法来初始化和操作组件。例如,创建...

    基于Spring框架的物流管理系统设计源码

    这些文件详细展示了如何使用Spring、Struts2、Spring Data、JPA、Hibernate、jQuery Easyui1.3.2和AngularJS等技术构建一个物流管理系统,该系统分为前端和后端两大模块,非常适合用于学习和参考Java项目的开发。

    jquery easyui1.32 最新手册两本

    **jQuery EasyUI 1.3.2:深入理解与应用** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一套完整的用户界面组件,用于快速构建功能丰富的 Web 应用程序。EasyUI 1.3.2 版本是这个框架的一个重要版本,...

Global site tag (gtag.js) - Google Analytics