Spring MVC 使用ajax异步交互返回数据

HTML

<form id="signinform">
<div class="sign_in">
<div>
<label for="username"> 用户名 </label> <input type="text" class="input"
id="username" name="username" placeholder="邮箱号" />
</div>
<div>
<label for="passwd"> 密码 </label> <input type="password"
class="input" id="passwd" name="passwd" placeholder="邮箱密码" />
</div>
<div id="IDcode">
<label for="passcode"> 验证码 </label>
<div>
<input type="text" class="input_IDcode" id="passcode"
name="passcode" placeholder="填写右侧的验证码" /> <img
src="sign/IDcode.do" class="IDcodeImg" />
</div>
</div>
<div>
<input type="submit" value="登录" class="but-submit" />
<div class="msg"></div>
</div>
</div>
</form>

JS

function signinformValidate() {
return {
rules : {
username : {
required : true,
rangelength : [ 6, 6 ]
},
passwd : {
required : true
},
passcode : {
required : true
}
},
messages : {
username : {
required : "请输入用户名",
rangelength : "输入长度错误"
},
passwd : {
required : "请输入密码"
},
passcode : {
required : "请输入验证码"
}
},
messages : {
f_username_txt : {
required : "请输入用户名",
rangelength : "输入长度错误"
},
f_passwd_txt : {
required : "请输入密码"
},
f_passcode_txt : {
required : "请输入验证码"
}
},
errorPlacement : function(error, element) {
if (element.attr("name") == "f_passcode_txt") {
error.appendTo(element.parent().parent());
} else {
error.appendTo(element.parent());
}
},
submitHandler : function() {
$("#signinform").ajaxSubmit({
type : "post",
url : "sign/signin.do",
// 提交form的时候不需要传递参数，springMVC会自动匹配
beforeSubmit : function() {
$(".msg").text("正在登录......");
$(".but-submit").attr("disabled", true);
},
success : function(data) {
alert(data);
},
error : function() {
$(".msg").text("登录失败，请联系管理员！");
$(".but-submit").attr("disabled", false);
}
});
return false;
}
};
}

Controller

/**
* @responsebody表示该方法的返回结果直接写入HTTP response body中
*                                 一般在异步获取数据时使用，在使用@RequestMapping后，返回值通常解析为跳转路径，
*                                 加上@responsebody后返回结果不会被解析为跳转路径，而是直接写入HTTP
*                                 response body中。
*                                 比如异步获取json数据，加上@responsebody后，会直接返回json数据。
* @param signin
* @return
*/
@ResponseBody
@RequestMapping(value = "/signin.do", method = RequestMethod.POST)
public String sifnIn(@ModelAttribute(value = "signin") SignIn signin) {
return signin.getUsername() + signin.getPasswd() + signin.getPasscode();
}

/**
* 方法二，直接使用PrintWriter输出
*
* @param signin
* @param write
*/
@RequestMapping(value = "/signin2.do", method = RequestMethod.POST)
public void sifnIn2(@ModelAttribute(value = "signin") SignIn signin, PrintWriter write) {
write.write(signin.getUsername() + signin.getPasswd() + signin.getPasscode());
// flush表示不知道输出的内容有多少进行分段输出
write.flush();
write.close();
}

/**
* 方法三，等同于方法二
* PrintWriter = Response.getWriter()
*
* @param signin
* @param write
* @throws IOException
*/
@RequestMapping(value = "/signin3.do", method = RequestMethod.POST)
public void sifnIn3(@ModelAttribute(value = "signin") SignIn signin, HttpServletResponse response) throws IOException {
response.getWriter().write(signin.getUsername() + signin.getPasswd() + signin.getPasscode());
response.getWriter().flush();
response.getWriter().close();
}