Spring3 MVC中Ajax的使用

来源：http://hhdem.com/2012/01/30/spring3-mvc-ajax-sample/

现在已经开始使用Spring3了，MVC虽然用了很久不过Ajax一直通过DWR实现，不过既然Spring3已经支持Ajax访问，那就必须折腾下了。

1. 首先，新建Controller类用于接收ajax请求，这里建立AjaxCheckController，目的是检查注册用户是否已经存在

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

@Controller @RequestMapping ( "/a" ) public class AjaxCheckController extends BaseController {      @Autowired    private UserManager userManager;      @RequestMapping (value = "/checkexists/loginname/{loginName}" , method = RequestMethod.GET)    public @ResponseBody Map<String, Object> checkLoginNameExists( @PathVariable String loginName) {      User user = userManager.findUserByLoginName(loginName);      Map<String, Object> modelMap = new HashMap<String, Object>();      modelMap.put( "exists" , user != null );      return modelMap;    }      @RequestMapping (value = "/checkexists/email" , method = RequestMethod.GET)    public @ResponseBody Map<String, Object> checkEmailExists( @RequestParam (value = "email" , required = true ) String email) {      User user = userManager.findUserByEmail(email);      Map<String, Object> modelMap = new HashMap<String, Object>();      modelMap.put( "exists" , user != null );      return modelMap;    }   }

2. 请求页面，在这里就是注册页面了，部分js代码如下：

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

function loginOnChange(event) {              ....                $.ajax({                  type : 'GET' ,                  contentType : 'application/json' ,                  url : 'a/checkexists/loginname/' +loginname,                  dataType : 'json' ,                  success : function (data) {                      if (data && data.exists) {                      log_tip_div.style.display = "inline" ;                  log_tip.innerHTML= "<img src='<@common.basePath/>/img/exclamation.gif'/> 该用户名已经被使用" ;                  canSub = false ;                  loginUserError = true ;                  isLoginUserExists = true ;                      } else {                  log_tip_div.style.display = "inline" ;                  log_tip.innerHTML= "<img src='<@common.basePath/>/img/fit.gif'/> 用户名可以使用" ;                  canSub = true ;                  loginUserError = false ;                  isLoginUserExists = true ;                  }                  },                  error : function () {                    alert( "error" )                  }              });            .....            }              function emailOnChange(event) {              ....                $.ajax({                  type : 'GET' ,                  contentType : 'application/json' ,                  url : 'a/checkexists/email' ,                  data: 'email=' +email,                  dataType : 'json' ,                  success : function (data) {                if (data && data.exists) {                  email_tip_div.style.display = "inline" ;                  email_tip.innerHTML= "<img src='<@common.basePath/>/img/exclamation.gif'/> 该邮箱已经注册过" ;                  canSub = false ;                  emailError = true ;                  isEmailExists = true ;                } else {                  email_tip_div.style.display = "inline" ;                  email_tip.innerHTML= "<img src='<@common.basePath/>/img/fit.gif'/> 邮箱未被注册过,可以使用" ;                  canSub = true ;                  emailError = false ;                  isEmailExists = true                }              },                  error : function () {                    alert( "error" )                  }              });          ....            }

到此就可以了，可以通过jquery轻松访问Spring的Controller，是不是很简单呀！