×

JS开发:用ajax实现简单的登录页面

作者:Terry2021.08.27来源:Web前端之家浏览:5726评论:0
关键词:js

JS开发:用ajax实现简单的登录页面。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>登录页面</title>
 <style>
  .div1{
   display: none;
   color: red;
  }
 </style>
</head>
<body>
 <div>
  用户名:<input type="text" id="username" ><br/>
  记住用户名:<input type="checkbox" id="rember"><br/>
  密码<input type="password" id="password"><br/>
  <input type="submit" value="登录" id="register">
  <div></div>
 </div>
 
 <script src="jquery.min.js"></script>
 <script>
  $(function () {

   $('#register').click(function () {
    // alert('ok');
    //获取用户名和密码:
    username = $('#username').val();
    password = $('#password').val();
    rember = $('#rember').val();
    // alert(rember);
    $.ajax({
     url:"/login_ajax_check",
     type:"POST", //提交方式
     data:{"username":username,"password":password,"rember":rember},
     dataType:"json",
     
    }).done(function (data) {
     if (data.res==1){
      // alert('username')
      location.href="/index" rel="external nofollow" 

     }else{
      // alert('username');
      $('.div1').show().html('用户名或密码输入错误')

     }
    })
   });
  });
 </script>
</body>
</html>

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20210827s3.html

网友评论文明上网理性发言 已有0人参与

发表评论: