<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>用户登录</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/login.css"/>
</head>
<body>
<header>
<div class="icon-logo logo"><a href="index.html"><span>项目名称</span></a></div>
<div class="title">
用户登录
</div>
<div class="icon-login login"><a href="login.html"><span>用户登录</span></a></div>
</header>
<main>
<div id="loginLogo"></div>
<input type="text" id="userName" placeholder="请输入用户名"/>
<input type="password" id="userPass" placeholder="请输入密码"/>
<input type="tel"id="code_input"placeholder="请输入下方图片验证码"/>
<div id="v_container"></div>
<div id="tip"></div>
<div id="Reg-login">
<a href="reg.html">没有账户,点击注册</a>
</div>
<button id="button">点击登录</button>
</main>
<script src="js/jquery.min.js"></script>
<script src="js/identifying.js"></script>
<script src="js/galaxy.js"></script>
<script src="js/login.js"></script>
<script src="js/url.js"></script>
</body>
</html>
--------------------------------------------------------
//login.js
$(function(){
//图片验证码功能
var verifyCode = new GVerify("v_container");
$("#button").click(function(){
var res = verifyCode.validate($("#code_input").val());
var userName=$("#userName").val();
var userPass=$("#userPass").val();
if(!res){
$("#tip").html("图片验证码错误,请重新输入!")
}else{
if(userName!=""&&userPass!=""){
$.ajax({
url:url+"/login",
data:{
username:userName,
password:userPass
},
async:true,
type:"POST",
success:function(result){
if(result.errCode==0){
localStorage.tokenID=result.tokenID;
localStorage.username=result.username;
window.location.href="index.html";
}else{
$("#tip").html("用户名或密码错误!")
}
}});
}else{
$("#tip").html("用户名和密码必须填写")
}
}
})
})