1、由于spring3已经对ajax支持的很好了,前端就可以使用html+jquery,后台使用spring,两者之间用json交换数据就可以了。放弃原来使用的jsp+struts了。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript"> $(document).ready(function() { $.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; }; $("#sub").click(function() { var userAccountForm = $("#userAccountForm"); //将form数据组装成json对象的juery扩展 var userAccount = userAccountForm.serializeObject(); //将json对象转成String是用的json2(http://www.json.org/js.html)的JSON.stringify var jsonuserAccount = JSON.stringify(userAccount); $.ajax({ type : 'POST', contentType : 'application/json', url : 'http://192.168.8.65/userAccountAjax/getUserAccount', data : jsonuserAccount, dataType : 'json', success : function(data) { alert(data); $("div#responsename").text(data.usacLoginName); $("div#responsepasswd").text(data.usacLoginPasswd); } }); }); $("#pwd").click(function() { $.ajax({ type : 'GET', contentType : 'html', url : 'http://192.168.8.65/userAccountAjax/getUserPwd?usacLoginName='+$("#usacLoginName").val(), dataType : 'json', success : function(data) { $("div#responsepasswd").text(data); } }); }); }); </script> </head> <body> <form action="" id="userAccountForm" name="userAccountForm"> 用户名:<input type="text" id="usacLoginName" name="usacLoginName" value="xctong" /><br/> 密码:<input type="text" id="usacLoginPasswd" name="usacLoginPasswd" value=""/> <input type="button" id="sub" name="sub" value="保存对象" /> <input type="button" id="pwd" name="pwd" value="查看密码" /> <div id="responsename"></div> <div id="responsepasswd"></div> </form> </body> </html>
package com.yt.manager.user.controller;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yt.manager.user.model.UserAccount;
import com.yt.manager.user.repository.UserAccountRepository;
/**
* 控制器
* @author zxf
*
*/
@Controller
@RequestMapping("/userAccountAjax")
public class UserAccountAjaxController {
@Resource
UserAccountRepository userAccountRepository;
/**
* 1、注意处理申请的函数的参数直接就是Customer对象(Customer是一个具有属性name和addr的vo),
* 而不是json字串,这里的关键是这样的。
* 2、spring具有将数据转化后再交给controller的功能,spring 3
* 新增了对json的处理能力,是基于Jackson JSON Processor(http://jackson.codehaus.org/)的。
* 3、这样一来,spring在接收contentType为application/json的request时会自动将json字串间转换成期望
* 的java对象,同样,发送response时,contentType被设为application/json,并且将java对象转为 json
* 字串。
* 4、上面已经说到,spring自动将response进行json化,所以处理函数直接返回vo对象就可以了。
* 而在页面端,由于我们指定了dataType为json,所以jquery直接把接收到的json字串转成了javascript
* 对象,我们可以直接使用data.name的写法取得数据了。
* @param userAccount
* @return
*/
@RequestMapping(value = "/getUserAccount", method = RequestMethod.POST)
@ResponseBody
public UserAccount getUserAccount(@RequestBody UserAccount userAccount) {
System.out.println("用户名:"+userAccount.getUsacLoginName());
System.out.println("密码:"+userAccount.getUsacLoginPasswd());
return userAccount;
}
@RequestMapping(value = "/getUserPwd", method = RequestMethod.GET)
@ResponseBody
public String getUserPwd(String usacLoginName) {
UserAccount ua = userAccountRepository.getUserAccountByLoginName(usacLoginName);
return ua.getUsacLoginPasswd();
}
}
<!--处理来自JSON格式的请求,spring在接收contentType为application/json的request时会自动将json字串间转换成期望 的java对象,同样,发送response时,contentType被设为application/json,并且将java对象转为 json 字串--> <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" > </bean>
http://hi.baidu.com/danghj/blog/item/71d9fecd606ee95d0eb34572.html