Spring3 MVC中Ajax的使用

来源：互联网发布：淘宝上发票抬头写个人编辑：程序博客网时间：2024/04/30 09:59

来源：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")
publicclass AjaxCheckController extendsBaseController {
 
  @Autowired
  privateUserManager userManager;
 
  @RequestMapping(value = "/checkexists/loginname/{loginName}", method = RequestMethod.GET)
  public@ResponseBody Map<String, Object> checkLoginNameExists(@PathVariableString loginName) {
    User user = userManager.findUserByLoginName(loginName);
    Map<String, Object> modelMap = newHashMap<String, Object>();
    modelMap.put("exists", user != null);
    returnmodelMap;
  }
 
  @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 = newHashMap<String, Object>();
    modelMap.put("exists", user != null);
    returnmodelMap;
  }
 
}

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
functionloginOnChange(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")
                }
            });
 
        .....
          }
 
          functionemailOnChange(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，是不是很简单呀！