[西安|结业弟子]JS-刘思安|2020年05月06日的日报-技能树.IT修真院

发表于： 2020-05-06 23:26:47

1 1811

今日完成

完成任务5

原生js

// 兼容性 创建全局变量
var xmlhttp;
if (window.XMLHttpRequest) {
  // code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {
  // code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

xmlhttp.onload = function () {
  console.log(xmlhttp.responseText);
};

function getForm() {
  var name, pwd, requestCode;

  var user = document.getElementById("inputUser");
  var pass = document.getElementById("inputPass");
  // 获取输入信息
  name = user.value;
  pwd = pass.value;

  // 表单验证
  var flag = true;
  if (name == "") {
    user.parentNode.getElementsByClassName("blank-alert")[0].style.display =
      "block";
    pass.parentNode.getElementsByClassName("blank-alert")[0].style.display =
      "none";
    flag = false;
  } else {
    user.parentNode.getElementsByClassName("blank-alert")[0].style.display =
      "none";
    if (pwd == "") {
      pass.parentNode.getElementsByClassName("blank-alert")[0].style.display =
        "block";
      flag = false;
    } else {
      pass.parentNode.getElementsByClassName("blank-alert")[0].style.display =
        "none";
    }
  }
  console.log(flag);
  if (flag) {
    // 发送请求
    xmlhttp.open("POST", "/carrots-admin-ajax/a/login", true);
    var par = "name=" + name + "&pwd=" + pwd;
    // 添加头部信息
    xmlhttp.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    // 发送参数
    xmlhttp.send(par);
    // 参数发送完成后执行函数
    xmlhttp.onload = function () {
      // 转换数据类型
      var requestCode = JSON.parse(xmlhttp.responseText);
      // 获取返回码
      console.log(requestCode.code);
      var message = document.querySelector(".message-alert");
      if (requestCode.code == 0) {
        message.innerHTML = "";
        alert("登录成功");
      } else if (requestCode.code == -5003) {
        message.innerHTML = "该用户名不存在";
      } else if (requestCode.code == -5004) {
        message.innerHTML = "密码错误";
      }
    };
  }
}

// 键盘监听
document.onkeydown = function (event) {
  var e = event || window.event || arguments.callee.caller.arguments[0];
  if (e && e.keyCode == 13) {
    getForm();
  }
};

$(document).ready(function () {
  // 登录点击事件
  $("#loginSubmit").click(function () {
    let name = $("#inputUser").val();
    let pwd = $("#inputPass").val();

    // 表单验证
    let flag = true;
    if (name == "") {
      $("#inputUser").siblings().filter(".blank-alert").show();
      $("#inputPass").siblings().filter(".blank-alert").hide();
      flag = false;
    } else {
      $("#inputUser").siblings().filter(".blank-alert").hide();
      if (pwd == "") {
        $("#inputPass").siblings().filter(".blank-alert").show();
        flag = false;
      } else {
        $("#inputPass").siblings().filter(".blank-alert").hide();
      }
    }
    // 表单验证通过 则发送请求
    if (flag) {
      $.post(
        // url
        "/carrots-admin-ajax/a/login",
        {
          //   发送的参数
          name: JSON.stringify(name),
          pwd: JSON.stringify(pwd),
        },
        //   回调函数
        function (data) {
          var result = JSON.parse(data);
          //
          var message = document.querySelector(".message-alert");
          //
          console.log(result.code);
          if (result.code == 0) {
            message.innerHTML = "";
            alert("登录成功");
          } else if (result.code == -5003) {
            message.innerHTML = "该用户不存在";
          } else if (result.code == -5004) {
            message.innerHTML = "密码错误";
          }
        }
      ),
        "json";
    }
  });

  //键盘事件
  $("input").keydown(function (event) {
    if (event.keyCode == 13) {
      $("#loginSubmit").trigger("click");
    }
  });
});