Html表单
用户名:<input type="text" name="username" id="username1"/><br>
密码:<input type="password" name="password" id="password1""/><br>
<input type="button" value="登陆" id="btn"/>
Ajax部分
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$.ajax({
type:'POST',
url:'${pageContext.request.contextPath}/Login/loginVerify',
//data发送请求数据,val()为文本内容
//不能进行输入写的Html标签文本内容用text()获取
data:{
username:$("#username1").val(),
password:$("#password1").val()
},
success:function(data){
//JS输出JSON数据
alert(data.message);
},
error:function(){
alert("服务器异常");
}
});
});
});
</script>
后台Servet部分
@RequestMapping(value="loginVerify",method=RequestMethod.POST)
public void loginVerify(HttpServletRequest request , HttpServletResponse response,User user) throws Exception{
String username = user.getUsername();
String password = user.getPassword();
//设置response的编码方式
response.setCharacterEncoding("utf-8");
//设置response的返回数据类型,JSON数据
response.setContentType("application/json;charset=utf-8");
if(username==null||password==null||"".equals(username)||"".equals(password)){
//JSON中写入字符串要用\"转义,''单引无效
response.getWriter().write("{\"message\":\"账号或密码不能为空\"}");
return;
}else if("admin".equals(username)&&"1234".equals(password)){
response.getWriter().write("{\"message\":\"账号密码正确!\"}");
return;
}else{
response.getWriter().write("{\"message\":\"账号或密码错误!\"}");
return;
}
}