登录注册页面

最新推荐文章于 2022-03-06 19:54:55 发布

·港岛妹妹

最新推荐文章于 2022-03-06 19:54:55 发布

阅读量799

点赞数 1

分类专栏： js练习题文章标签： jquery

本文链接：https://blog.csdn.net/qq_44417271/article/details/112586747

版权

js练习题专栏收录该内容

6 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
      *{margin: 0;padding: 0;}
      .main{
        margin-top:50px;
        margin-left: 200px;
      }
      .form-group input{
        width: 200px;
      }
    </style>
</head>
<body>
  <form class="main">
    <div class="form-group">
      <label for="username">用户名</label>
      <input class="form-control" id="username" placeholder="请输入用户名">
    </div>
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" class="form-control" id="password" placeholder="Password">
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox" id="rem"> 30天免登录
      </label>
    </div>
    <button type="submit" class="btn  btn-info" id="submit">登录</button>
    <button type="submit" class="btn  btn-warning" id="post">去注册</button>
  </form>
      <script src="jquery.min.js"></script>
      <script>
        $("#submit").click(function(){
          let http = new XMLHttpRequest()
              http.open("get",`http://10.35.161.124:8080/logon?username=${$("#username").val()}&password=${$("#password").val()}`)
              http.send()
              http.onreadystatechange = function(){
                if(http.readyState === 4){
                  console.log(http.responseText)
                  if(http.responseText === "success"){
                    alert("登录成功")
                  }
                  else{
                    alert("用户名或密码错误")
                  }
                }
              }
              if($("#rem").prop("checked")){
                localStorage.setItem("username",$("#username").val())
                localStorage.setItem("password",$("#password").val())
              }
        })
        // console.log(localStorage.getItem("username"))
        if(localStorage.getItem("username")&&localStorage.getItem("password")){
          $("#username").val(localStorage.getItem("username"))
          $("#password").val(localStorage.getItem("password"))
        }
      </script>
      

</body>
</html>

注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
      *{margin: 0;padding: 0;}
      .form-horizontal{
          margin-top: 50px;
      }
      .form-horizontal input{
        width: 200px;
      }
    </style>
</head>
<body>
    <form class="form-horizontal">
        <div class="form-group">
          <label for="username" class="col-sm-2 control-label">用户名</label>
          <div class="col-sm-10">
            <input class="form-control" id="username" placeholder="请输入用户名">
          </div>
        </div>
        <div class="form-group">
          <label for="password" class="col-sm-2 control-label">密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="password" placeholder="Password">
          </div>
        </div>
       
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success">注册</button>
          </div>
        </div>
      </form>


      <script src="jquery.min.js"></script>
      <script>
            $(".btn").click(function(){
                // alert(1)
                let http = new XMLHttpRequest()
                    http.open("get",`http://10.35.161.124:8080/addUser?username=${$("#username").val()}&password=${$("#password").val()}`)
                    http.send()
                    http.onreadystatechange = function(){
                        if(http.readyState === 4){
                        console.log(http.responseText)
                        if(http.responseText === "success"){
                            alert("注册成功")
                            location.href="http://10.35.161.124/6.3/logon.html"
                        }
                        else{
                            alert("用户名或密码错误")
                        }
                    }
                }
            })
      </script>
</body>
</html>

·港岛妹妹

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
登录注册页面

登录<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录</title> <link rel="stylesheet" href="bootstrap.m
复制链接

扫一扫