利用ajax来解决验证用户名问题-demo

最新推荐文章于 2021-11-04 21:32:07 发布

weixin_45368324

最新推荐文章于 2021-11-04 21:32:07 发布

阅读量230

点赞数

分类专栏：前后端交互文章标签： node.js

本文链接：https://blog.csdn.net/weixin_45368324/article/details/106915001

版权

前后端交互专栏收录该内容

3 篇文章 0 订阅

订阅专栏

利用ajax来解决验证用户名问题

目录结构

在这里插入图片描述

users.json

[{
    "id":1,
    "username":"张三",
    "pwd":123
},{
    "id":2,
    "username":"李四",
    "pwd":123
}]

index.js(koa)

const Koa = require("koa");
const Router = require("koa-router");

const koaStatic = require("koa-static");

const path = require("path");

const usersData = require("./data/users.json");

let app = new Koa();
let router = new Router();

app.use(koaStatic(path.join(__dirname, "/static")));

router.get("/", (ctx, next) => {
  ctx.body = "hello";
});

router.get("/checkUserName", (ctx, next) => {
  console.log(ctx.query.username);
  let res = usersData.find((v) => v.username == ctx.query.username);
  if (res) {
    ctx.body = {
      status: 1,
      info: "用户名正确",
    };
  } else {
    ctx.body = {
      status: 2,
      info: "用户名错误",
    };
  }
});

app.use(router.routes());

app.listen(3000, () => {
  console.log("running...");
});

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/login.css" />
    <title>Document</title>
  </head>

  <body>
    <div class="loginContainer">
      <h1>登录</h1>
      <form action="/checkUser" method="post">
        姓名：
        <input class="inputStyle" type="text" name="username" />
        <div class="exchange">用户名错误</div>
        <br />密码：
        <input class="inputStyle" type="password" name="pwd" /><br />
        <input class="loginStyle" type="submit" value="登录" />
      </form>
    </div>
    <script>
      // ajax技术；
      // XMLHttpRequest
      document.querySelector(".inputStyle").onblur = function () {
        // console.log(this.value);
        let xhr = new XMLHttpRequest();
        xhr.open("get", `/checkUserName?username=${this.value}`, true);
        xhr.onload = function () {
          console.log(xhr.responseText);
          let obj = JSON.parse(xhr.responseText);
          document.querySelector(".exchange").innerHTML = obj.info;
          if (obj.status == 1) {
            document.querySelector(".exchange").style.color = "green";
          } else {
            document.querySelector(".exchange").style.color = "red";
          }
        };
        xhr.send();
      };
    </script>
  </body>
</html>

.loginContainer{
    margin: 0 auto;
    width: 600px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 50px;
    border: 1px solid;
}
.loginContainer input{
    margin-bottom: 20px;
}
.loginStyle{
    width: 160px;
    height: 40px;
    background: rgb(50,203,77);
    color: white;
    font-size: 17px;
}
.inputStyle{
    width: 200px;
    height: 30px;
    padding: 5px;
    outline: none;
}

.inputStyle:focus{
    border: 1px solid rgb(50,203,77);
}
form{
    position: relative;
}
.exchange{
    position: absolute;
    top:8px;
    right: 65px;
    color: red;
}