ajax的实践
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆界面</title>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div align="center">
<h2 style="color: black;">用户登陆</h2>
<table border="1">
<tr>
<td>用户选择</td>
<td>管理员<input type="radio" id="jiese" name="jiese" value="1" checked="checked">
用户<input type="radio" id="jiese" name="jiese" value="2" >
</td>
</tr>
<tr>
<td>登陆账号</td>
<td> <input type="text" id="username" maxlength="12" required placeholder="请输入账号"/></td>
</tr>
<tr>
<td>登陆密码</td>
<td> <input type="password" id="password" required placeholder="请输入密码"/></td>
</tr>
<tr><td>验证码</td>
<td>
<input type="text" value="" placeholder="请输入验证码（区分大小写）" onblur="sublim()"
style="height:20px;position: relative; font-size:16px;"id ="text">
<canvas id="canvas" width="110" height="30" onclick="dj()"
style="border: 1px solid #ccc;
border-radius: 5px;"></canvas>
</td>
</tr>
<tr>
<td></td>
<td><button type="button" id="login" >登录</button>
<button type="button" id="register"value="注册">注册</button></td>
</tr>
</table>
</div>
<script>
$(function(){
$("#login").click(function(){
var id=$("#username").val();
var password=$("#password").val();
$.ajax({
url:"login",
type:"POST",
data:{"username":id,
"password":password},
dataType:"JSON",
async: true,
cache: false,
success:function(data){
if(data==null){
alert("用户名不存在!请先注册");
$("#username").focus();
$("#password").val("");
}else if(data.password!=password){
alert("密码错误！");
$("#password").val("");
$("#password").focus();
}else{
localStorage.setItem("id",id);
alert("登陆成功！");
location.href = "index.jsp?id="+id;
}
},
error:function(e){
alert("出现错误！");
}
});
});
$("#register").click(function(){
location.href="register.jsp";
});
})
</script>
</html>