用户登录页面逻辑及代码实现

最新推荐文章于 2025-07-20 15:44:43 发布

原创最新推荐文章于 2025-07-20 15:44:43 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

# jquery #ajax

这篇博客详细介绍了用户登录页面的逻辑实现，包括使用jQuery处理按钮点击事件，验证图片验证码功能，以及通过AJAX发送POST请求进行用户身份验证。当图片验证码错误、用户名或密码为空时，页面会显示相应提示。验证成功则跳转到首页，否则显示错误信息。

<!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("用户名和密码必须填写")
           }
       }
   })
})