`
yiyu
  • 浏览: 186711 次
  • 性别: 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数据就可以了。

欢迎拍砖啊,呵呵。
分享到:
评论
15 楼 yiyu 2010-04-24  
Angel_Night, bevis.cn
你们好,其实我也是刚刚开始这么想,没想到能遇到你们,既然大家思路一样,不如一起做下去,不知有没有兴趣
14 楼 Angel_Night 2010-04-24  
bevis.cn 写道
我这一两个月来,也一直在构建一个系统,正在考虑这些。
第一,页面展现的时候,一个页面可能要用很多jquery的插件,导入的js一大串,特别jquery ui的东西。


特别是jQueryUi的东西?
不理解...jQueryui也有整合起来的啊...没有必要按照组件引入把 直接把那个整合的js引入就行了...
13 楼 Angel_Night 2010-04-24  
yiyu 写道
nell_zn82 写道
yiyu 写道
Angel_Night 写道
过去使用el表达式设值

现在用json 难道数据过来以后 需要 先解析json 然后对应的 用$()取到以后 修改值么?
那这个工作量是不是打了点

还是说有其他一些好的方法


应该可以写一个通用函数,将json对象的各个属性赋值到html的元素上,说不定已经有这样的东西了呢


通用函数并非对所有业务通用,例如:除非是开发的系统所有业务都涉及到企业信息,这样可以用一个通用的函数直接就赋值了,但是对于其他系统各业务模块并非这样,所以还是有大量的赋值工作需要去做,反正我是没找到好的方法。



确实,感觉只能是一些特定的情况才能做通用函数,确实前台的很大一部分工作是枯燥的赋值和输入校验之类的,可能没什么好办法,想想即使像VB这种这么成功的快速开发工具在表现层也是一大堆赋值校验嘛



昨天一直思考这个问题...其实完全可以在jQuery或者其他JavaScriptlib上封装一层
效果就和el差不多么...
把this传进去 然后根据封装的方法参数设值就ok了..

调用时像这样
setter(this,"name");

在需要赋值的地方调用这个方法 把自身 和 值的名称写上 很低端的封装就可以完成....


当然 这只是我吃晚饭和早饭时胡乱想到的 不太成熟吧...
12 楼 bevis.cn 2010-04-24  
我这一两个月来,也一直在构建一个系统,正在考虑这些。
看了LZ的这一遍,给我启示不少,先谢过了。
不过我有两个疑问:
1.从spring返回给juqery是的json对象,
在java里return customer;然后会转成js用的json,可是如果customer里对象比较复杂,比如有Date.List,或者其它一些复杂的类型,自动转换后的格式往往不是我想的,有时候需要自己设定转换的格式,自己做这个过程好像有些麻烦。我曾经也用JSONObject试过。

2.我们从jquery专json给spring的时候,自动转成vo对象,可是我们在html里有时候往往会放一些hidden对象,或者把一html里的几个input的框的值进行转换组成一个值,再用这个组合值构成vo对象的一个属性,
所以我想问的是,html里的input的很多值,可能并不是vo的属性,这样传给spring,spring会丢失,还是要在js处理掉才能让spring接收
这方面有更好的方法吗

总体来说,LZ中这种想法我是很赞同,我也是只用spring+hibernate/ibatis ,jquery+html这种方式。
但是我在实际做的时候,还是遇到不少麻烦,
第一,页面展现的时候,一个页面可能要用很多jquery的插件,导入的js一大串,特别jquery ui的东西。
第二,就是在交互的时候,json,xml,html,string之间转换也比较麻烦
11 楼 yiyu 2010-04-24  
nell_zn82 写道
yiyu 写道
Angel_Night 写道
过去使用el表达式设值

现在用json 难道数据过来以后 需要 先解析json 然后对应的 用$()取到以后 修改值么?
那这个工作量是不是打了点

还是说有其他一些好的方法


应该可以写一个通用函数,将json对象的各个属性赋值到html的元素上,说不定已经有这样的东西了呢


通用函数并非对所有业务通用,例如:除非是开发的系统所有业务都涉及到企业信息,这样可以用一个通用的函数直接就赋值了,但是对于其他系统各业务模块并非这样,所以还是有大量的赋值工作需要去做,反正我是没找到好的方法。



确实,感觉只能是一些特定的情况才能做通用函数,确实前台的很大一部分工作是枯燥的赋值和输入校验之类的,可能没什么好办法,想想即使像VB这种这么成功的快速开发工具在表现层也是一大堆赋值校验嘛
10 楼 jitabc 2010-04-24  
换汤不换药,不就用了spring mvc取代了struts。
9 楼 JavaEye4Cwy 2010-04-24  
一般般,不一定要spring系列。
8 楼 YiSingQ 2010-04-24  
实实在在地感受到了轻量级的开发。。。确实是爽。
在构建并发用户数量较高的系统时,Json + Spring + ORM还是可行的。最起码丢弃了相对较笨的Struts之类的框架。
7 楼 whaosoft 2010-04-24  
lz的想法是不错 不过实现起来吗很难
6 楼 liwenjie 2010-04-23  
json-lib、xstream可以处理json和javabean的转换
但是不依赖于第三方的jar包,struts已经可以处理javabean和前端html dom元素值的转换了,当然js处理json非常方便,也就是说可以不用json就能转,struts也可以直接返回json流
限制我们在项目中大量使用DWR,所以对于struts的使用量已经大大减少了,比如在上传下载时使用
spring3的特性研究中。
5 楼 nell_zn82 2010-04-23  
yiyu 写道
Angel_Night 写道
过去使用el表达式设值

现在用json 难道数据过来以后 需要 先解析json 然后对应的 用$()取到以后 修改值么?
那这个工作量是不是打了点

还是说有其他一些好的方法


应该可以写一个通用函数,将json对象的各个属性赋值到html的元素上,说不定已经有这样的东西了呢


通用函数并非对所有业务通用,例如:除非是开发的系统所有业务都涉及到企业信息,这样可以用一个通用的函数直接就赋值了,但是对于其他系统各业务模块并非这样,所以还是有大量的赋值工作需要去做,反正我是没找到好的方法。
4 楼 kuchaguangjie 2010-04-23  
jsp 还是需要的吧,orm 也还是需要的。。。
3 楼 yiyu 2010-04-23  
Angel_Night 写道
过去使用el表达式设值

现在用json 难道数据过来以后 需要 先解析json 然后对应的 用$()取到以后 修改值么?
那这个工作量是不是打了点

还是说有其他一些好的方法


应该可以写一个通用函数,将json对象的各个属性赋值到html的元素上,说不定已经有这样的东西了呢
2 楼 Angel_Night 2010-04-23  
过去使用el表达式设值

现在用json 难道数据过来以后 需要 先解析json 然后对应的 用$()取到以后 修改值么?
那这个工作量是不是打了点

还是说有其他一些好的方法
1 楼 Angel_Night 2010-04-23  
认真看了一遍代码 写起来确实很过瘾啊...

serializeObject没接触过...不过楼主说的意思明白了

不过前端开发人员写js我估计没戏..至少我们公司没戏..

相关推荐

    jquery-1.3.2-jsdoc-Spket-profile.rar

    标题“jquery-1.3.2-jsdoc-Spket-profile.rar”表明这是一款与jQuery相关的资源,具体来说是jQuery 1.3.2版本的文档(JSDoc格式),并且与Spket工具的配置文件有关。这个压缩包可能是为了帮助开发者在Eclipse集成...

    jquery-1.3.2-vsdoc.js

    而`jquery-1.3.2-vsdoc.js`是jQuery 1.3.2版本的一个特殊文件,它是专为Visual Studio设计的插件,用于提供代码提示和文档支持,极大地提升了jQuery在Visual Studio中的开发效率。 首先,我们来了解什么是VSDOC。...

    jquery-1.3.2-vsdoc2.js

    jquery-1.3.2-vsdoc2.js,

    mybatis-spring-boot-autoconfigure-1.3.2-API文档-中英对照版.zip

    赠送原API文档:mybatis-spring-boot-autoconfigure-1.3.2-javadoc.jar; 赠送源代码:mybatis-spring-boot-autoconfigure-1.3.2-sources.jar; 赠送Maven依赖信息文件:mybatis-spring-boot-autoconfigure-1.3.2....

    shiro-spring-1.3.2-API文档-中英对照版.zip

    赠送原API文档:shiro-spring-1.3.2-javadoc.jar 赠送源代码:shiro-spring-1.3.2-sources.jar 包含翻译后的API文档:shiro-spring-1.3.2-javadoc-API文档-中文(简体)-英语-对照版.zip 对应Maven信息:groupId:...

    JQuery(jquery-1.3.2.js)

    JQuery(jquery-1.3.2.js)

    FCK在线编辑器源码及部署项目引用示例

    &lt;servlet-name&gt;Connector&lt;/servlet-name&gt; &lt;servlet-class&gt; com.FCKeditor.connector.ConnectorServlet &lt;/servlet-class&gt; &lt;init-param&gt; &lt;param-name&gt;baseDir&lt;/param-name&gt; &lt;param-value&gt;/upload/&lt;/param-value...

    mybatis-spring-boot-autoconfigure-1.3.2-API文档-中文版.zip

    赠送原API文档:mybatis-spring-boot-autoconfigure-1.3.2-javadoc.jar; 赠送源代码:mybatis-spring-boot-autoconfigure-1.3.2-sources.jar; 赠送Maven依赖信息文件:mybatis-spring-boot-autoconfigure-1.3.2....

    jquery-1.3.2-vsdoc

    jquery-1.3.2-vsdocjquery-1.3.2-vsdocjquery-1.3.2-vsdocjquery-1.3.2-vsdoc

    mybatis-spring-1.3.2-API文档-中文版.zip

    赠送原API文档:mybatis-spring-1.3.2-javadoc.jar; 赠送源代码:mybatis-spring-1.3.2-sources.jar; 赠送Maven依赖信息文件:mybatis-spring-1.3.2.pom; 包含翻译后的API文档:mybatis-spring-1.3.2-javadoc-API...

    shiro-spring-1.3.2-API文档-中文版.zip

    赠送原API文档:shiro-spring-1.3.2-javadoc.jar; 赠送源代码:shiro-spring-1.3.2-sources.jar; 包含翻译后的API文档:shiro-spring-1.3.2-javadoc-API文档-中文(简体)版.zip 对应Maven信息:groupId:org....

    jquery-1.3.2.min-vsdoc jquery-1.4.3.min 等等

    标题中的"jquery-1.3.2.min-vsdoc"和"jquery-1.4.3.min"提到了jQuery库的两个不同版本,分别是1.3.2和1.4.3。这两个版本都是jQuery的核心库文件,以.min表示它们是经过压缩和优化的版本,用于在网页中更快速地加载和...

    jquery-1.3.2.js和jquery.min-1.3.2.js

    同时,jQuery 1.3.2引入了`$.getJSON()`和`$.getScript()`,方便地处理JSON数据和异步加载脚本。 除了上述功能,jQuery 1.3.2还包括插件系统,允许开发者扩展其功能。许多优秀的第三方插件,如jQuery UI、jQuery ...

    Mybatis Generator配置详解.md

    &lt;version&gt;1.3.2&lt;/version&gt; &lt;configuration&gt; &lt;verbose&gt;true&lt;/verbose&gt; &lt;overwrite&gt;true&lt;/overwrite&gt; &lt;/configuration&gt; &lt;/plugin&gt; ``` 在main的resource目录下创建generatorConfig.xml文件 ![在...

    开发工具 commons-fileupload-1.3.2

    开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2...

    jquery-1.3.2-vsdoc2

    首先,"jquery-1.3.2-vsdoc2.js"是jQuery 1.3.2版本的文档注释文件,其主要功能是为Visual Studio提供代码智能提示。当你在VS2005或VS2008中编写涉及jQuery的JavaScript代码时,这个文件能帮助你快速了解每个函数和...

    Jquery1.3.2Spket自动提示包

    《jQuery 1.3.2 Spket自动提示包详解》 在编程领域,尤其是在Web开发中,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计等任务。而jQuery 1.3.2是jQuery的一个重要版本,尽管后续...

    aspose-words-15.8.0-jdk16.jar.rar

    添加依赖: &lt;dependency&gt; &lt;groupId&gt;com.itextpdf&lt;/groupId&gt; &lt;artifactId&gt;itext7-core&lt;/artifactId&gt; &lt;version&gt;7.1.0&lt;/version&gt; &lt;type&gt;pom&lt;/type&gt; ... &lt;version&gt;1.3.2&lt;/version&gt; &lt;/dependency&gt;

    mybatis-spring-1.3.2-API文档-中英对照版.zip

    赠送原API文档:mybatis-spring-1.3.2-javadoc.jar; 赠送源代码:mybatis-spring-1.3.2-sources.jar; 赠送Maven依赖信息文件:mybatis-spring-1.3.2.pom; 包含翻译后的API文档:mybatis-spring-1.3.2-javadoc-API...

    springMVC+mybitis+mongodb+maven整合

    &lt;version&gt;1.3.2&lt;/version&gt; &lt;/dependency&gt; ``` MongoDB的Java驱动需要添加如下依赖: ```xml &lt;dependency&gt; &lt;groupId&gt;org.mongodb&lt;/groupId&gt; &lt;artifactId&gt;mongodb-driver&lt;/artifactId&gt; &lt;version&gt;3.6.4&lt;/version&gt;...

Global site tag (gtag.js) - Google Analytics