[武汉|结业弟子]JS-万晶|2020年06月03日的日报-技能树.IT修真院

发表于： 2020-06-03 23:27:21

1 2111

今天完成的事情：今天写了任务六的登录页面
明天计划的事情：继续后续的任务
遇到的问题：理解要加强更加熟练才行
收获：写了登录页面

页面html代码很简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js5-1.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    </script>
</head>
<body>
    <div class="main">
        <div class="top">后台登录</div>
        <input type="text" id="name" placeholder="用户名">
        <input type="password" id="pwd" placeholder="密码">
        <div id="addText"></div>
        <button id="footer">登录</button>
    </div>
    <script src="./js5-1.js"></script>
</body>
</html>

css代码

html {
    background: url(./3.png) no-repeat;
    background-size: 100% 100%;
    height: 100%;
    background-attachment:fixed;
  }
  
  .main {
    display: flex;
    flex-direction: column;
    align-content: center;
    width: 400px;
    height: 320px;
    margin: 180px auto;
    padding: 30px 50px;
    border-radius: 10px;
    background-color: rgba(250, 250, 250, 0.6);
  }
  
  .main .top {
    text-align: center;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 20px;
    /* color: #59b1ec; */
  }
  
  .main input {
    height: 35px;
    border-radius: 10px;
    margin-bottom: 22px;
    padding-left: 40px;
    background-color: #fff !important;
    outline:none;
  }
  #name{
      background: url(./user.png) no-repeat 5px
  }
  
  #pwd{
      background: url(./password.png) no-repeat 5px
  }
  .main #addText {
    height: 20px;
    color: red;
  }
  
  .main #footer {
    width: 100%;
    height: 35px;
    margin-top: 20px;
    border-radius: 10px;
    font-size: 18px;
    text-align: center;
    line-height: 35px;
    outline:none;
  }
  
  

js代码

$("#footer").click(function () {
    $("#addText").text("")
    var name = document.getElementById("name").value//获取值
    var pwd = document.getElementById("pwd").value
    var xhr = new XMLHttpRequest();//异步请求
    xhr.open("post", "http://localhost/carrots-admin-ajax/a/login", true)//请求方式
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//固定写法
    xhr.send("name=" + name + "&pwd=" + pwd);
    xhr.onload = function () {
        let date = JSON.parse(xhr.responseText)
        if (date.code == 0) {
            alert("登录成功")
        } else {
            $("#addText").text(date.message)
        }
    }
    
});

重点是js的部分

var name = document.getElementById("name").value//获取值
    var pwd = document.getElementById("pwd").value

获取输入的值

var xhr = new XMLHttpRequest();//异步请求
    xhr.open("post", "http://localhost/carrots-admin-ajax/a/login", true)//请求方式
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");//固定写法

这一部分是ajax的内容，发起请求以及请求方式以及类型的固定写法

xhr.send("name=" + name + "&pwd=" + pwd);

拼接执行的内容

xhr.onload = function () {
        let date = JSON.parse(xhr.responseText)
        if (date.code == 0) {
            alert("登录成功")
        } else {
            $("#addText").text(date.message)
        }
    }