前端登陆使用ajax发送请求到后端,后端进行格式判断,然后返回信息到前端
上次做了一个项目,没有使用js来判断,而是用户进行登陆,通过ajax发送请求到后端,后端判断格式,然后将格式正确或错误的信息返回前端,
下面是我的过程
#1.首先我先把我的效果贴出来
首先是登陆界面图
然后是账号和密码格式错误
然后是格式正确(在这里我没有用登陆的封面,用的是注册的,因为登陆成功会自动跳转到主界面)
#2.效果看完了,现在是源码展示部分
首先是前端(只贴主要代码)
<h1 id="a">欢迎来到个人博客系统</h1>
<table border="2" width="250px">
<tr>
<td width="25%" align="center">账号</td>
<td width="75%" align="center"><input name="blogName" id="blogName" type="text" onblur="verifyName()" placeholder="请输入账号" style="height:20px;width:187px"/></td>
</tr>
<tr>
<td width="25%" align="center">密码</td>
<td width="75%" align="center"><input name="blogPw" id="blogPw" type="password" placeholder="请输入密码" style="height:20px;width:187px"/></td>
</tr>
</table>
<p id="message1" style="display: none"></p>
<p id="message2" style="display: none"></p>
<br/>
<br/>
<form>
<input id="userLogin" type="button" value="登陆" onclick="loginSubmit()"/><!--onclick="login_submit()"-->
<input id="userRegister" type="button" value="注册" onclick="enterRegister()"/>
<input id="resetPw" type="button" value="重置密码" onclick="enterResetPw()"/>
</form>
<h5 style="display: none" id="q">账号格式不正确</h5>
</div>
点击登陆,执行loginSubmit();
下面是我的ajax代码
function loginSubmit() {
var blogName = document.getElementById("blogName").value;
var blogPw = document.getElementById("blogPw").value;
var dataJson = {"blogName": blogName, "blogPw": blogPw};
var jsonData = JSON.stringify(dataJson);
$.ajax({
type: "get", //请求方式 get
dataType : "json", //数据类型 json
data: dataJson, //请求附带参数
contentType: 'application/json; charset=UTF-8',
url: "blogLoginURL", // 请求地址
timeout: 20000, //请求超时时间(20秒)
//async:false,//同步
error: function (data) { //请求错误捕捉
alert("连接服务器失败,请重试!");
},
success: function (map) { //请求成功捕捉
//账号格式不正确
if(map['userNameFormat']){
document.getElementById("message1").style.display="block";
document.getElementById("message1").innerHTML=map['userNameFormat'];
}
//密码格式不正确
if(map['userPwFormat']){
document.getElementById("message2").style.display="block";
document.getElementById("message2").innerHTML=map['userPwFormat'];
}
//用户存在
else if(map['successLogin']){
window.location.href = "blog/blogMain.html";
}
//用户不存在
else if(map['failLogin']){
document.getElementById("message1").style.display="block";
document.getElementById("message1").innerHTML=map['failLogin'];
document.getElementById("message2").style.display="none";
}
}
});
}
发送失败执行error: function (data)
发送成功执行success: function (map)
//用户登陆
@GetMapping(value = "/blogLoginURL")
@ResponseBody
public Map blogLogin(String blogName ,String blogPw){
//预先判断格式
Map map = formatVarify.loginFormatVarify(blogName,blogPw);
if(!(map.containsKey("userNameFormat"))&&!(map.containsKey("userPwForamat"))){
//将密码进行加密,验证数据库中是否有该用户
if(bus.queryblogUser(blogName,md5.inputPassToFormPass(blogPw)) == null){
map.put("failLogin","没有该用户");
}
else {
map.put("successLogin","登陆成功");
}
return map;
}
else {
return map;
}
}
看formatVarify.loginFormatVarify(blogName,blogPw);这条代码
调用farmatVarify类的静态方法loginFormatVarify(String userName,String userPw)
//格式验证
public class formatVarify {
//用户信息格式判断
public static Map loginFormatVarify(String userName,String userPw) {
Map hm = new HashMap();
if (!(userName.matches("[a-zA-Z|0-9|_]{6,13}"))) {
hm.put("userNameFormat", "用户名只能由英文字母、数字和下划线组成且长度在6~13");
}
if (!(userPw.matches("[a-zA-Z]{6,13}"))) {
hm.put("userPwFormat", "密码只能由英文字母组成且长度在6~13");
}
return hm;
}
}
如果格式不正确就添加到map中去。通过控制器即可放回到ajax中的success中,通过map[‘userNameFormat’]取出map中的值,然后显示在前端上。
我是新手,写的不好大家不要嘲笑。
没有附源码,因为这是我写的项目中的一部分。大家如果有什么不了解的话留言就可以了,我会一一回复的。