jquery(1.3.2)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數據就可以了。

歡迎拍磚啊,呵呵。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章