运用ajax+jquery+SpringMVC进行登录验证
前言:我tXX爷的,今晚真是给jar包搞残了,以后必须的打好基础在来搞事情。
由于我前期javaScript,ajax,jquery都是一路模糊过来,似懂非懂,ssm的增删改查+分页做完了,想想可以做做登录验证了,结果GG。ok,开始了!!。
一:导入jar,搞好配置
晚上给这个搞了半天。
导入js文件,发现js文件只能放在webContext目录下,放在web-inf下导入不了,不知道为啥
json依赖的jar包:好像只要6个,多了一个json.jar
SpringMVC处理json数据所需要的jar包:jackson
导入jar,还需要在springmvc.xml进行配置json支持
<!-- 加入json支持 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list>
<!-- 设置返回字符串编码 -->
<bean class="org.springframework.http.converter.StringHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
<!-- json转换器 -->
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
<value>application/x-www-form-urlencoded;charset=UTF-8</value>
</list>
</property>
</bean>
</list>
</property>
</bean>
二:写个jsp
原谅我还不会写前端,我发现,如果ajax出现问题就在succees/error function(){}中输出状态码,返回值等一般都可以解决,向下。
error:function(data){
alert("我好像出错了");
alert(data.status);
alert(data.readyState);
alert(data.responseText);
}
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login").click(function(){
var username = $("#username").val();
var password = $("#password").val();
if(username==""||username==null){
$("#username").focus;
$("#p1").css("color","red");
$("#p1").html("用户名不能为空");
}else if(password==""||password==null){
$("#password").focus;
$("#p2").css("color","red");
$("#p2").html("密码不能为空");
}else{
$.ajax({
url:"login",
data:{"username":username,
"password":password},
type:"POST",
dataType:"json",
success:function(data){
alert(data.ma);
},
error:function(data){
alert("我好像出错了");
alert(data.status);
alert(data.readyState);
alert(data.responseText);
}
});
}
});
});
</script>
</head>
<body>
<table align="center" border="1" cellpadding="10">
<tr>
<th colspan="3">登录表格</th>
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username" value="是对方答复"></td>
<td width="150"><p id="p1"></p></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="passwrod" id="password" value="343"></td>
<td><p id="p2"></p></td>
</tr>
<tr>
<td colspan="3" align="center"><input type="submit" value="登录" id="login"></td>
</tr>
</table>
</body>
</html>
三:写个controller
json返回的形式有两种pojo,map,具体这里https://www.cnblogs.com/kasi/p/8443289.html
@Controller
public class loginController {
@RequestMapping(value="login")
@ResponseBody //不能少
public Map<String, String> login(String username,String password){
System.out.println(username+"---"+password);
Map<String, String> map = new HashMap<String, String>();
map.put("ma", "优秀");
return map;
}
}
四:搞定了