Ajax实现注册登录校验
1.在做项目的时候,或多或少都会用到ajax来实现注册登录的校验,例如,当你注册时,你输入一个用户名,就会提示你,用户名可用,或者,用户名已被注册 ,等等 ,就像下图这种。
接下来我们就实现一下这个简单的实例吧。
1.Controller的编写,这里为了方便,就伪造一个用户名密码。
@RequestMapping("user/reg")
@ResponseBody
public String login(String name, String pwd){
String msg = "";
if(name != null){
if("admin".equals(name)){
msg = "ok";
}else {
msg = "username is error";
}
}
if(pwd != null) {
if ("123456".equals(pwd)) {
msg = "ok";
} else {
msg = "your password is error";
}
}
return msg;
}
注意别忘记@ResponseBody注解,返回的是字符串。
2.前端页面的编写,使用Ajax,我们导入Jquery
<%@ page isELIgnored="false"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="https://cdn.bootcss/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
function a1(){
$.post({
url:'/user/reg',
data:{"name":$("#name").val()},
success: function(data){
if(data.toString()=="ok"){
$('#userInfo').css("color","green");
}
else{
$('#userInfo').css("color","red");
}
$('#userInfo').html(data);
}
})
}
function a2(){
$.post('user/reg',{"pwd":$("#pwd").val()},function (data){
if(data.toString()=="ok"){
$('#pwdInfo').css("color","green");
}
else{
$('#pwdInfo').css("color","red");
}
$('#pwdInfo').html(data);
})
}
</script>
</head>
<body>
<p>
用户名:
<input type="text" id="name" onblur="a1()"/>
<span id="userInfo"></span>
</p>
<p>
密码:
<input type="text" id="pwd" onblur="a2()"/>
<span id="pwdInfo"></span>
</p>
</body>
</html>
这里主要就是js的编写,
url:’/user/reg’,
data:{“name”😒("#name").val()},
url是你Controller的请求路径,data就是用户名, 成功之后,给标签赋值。
onblur()是失去焦点而触发的事件。
我们来看一下效果吧:
但是我在这里遇到了一个问题,请求大佬支个招
就是中文乱码问题,我在web.xml中已经配置了过滤器。
<!-- 解决springmvc传递值乱码问题 -->
<filter>
<filter-name>encodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>encodingFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
但是还是乱码啊,哭了。
更多推荐
Ajax实现注册登录校验
发布评论