【每日一练】用户登录小案例

谢豪杰

已于 2022-03-17 20:43:45 修改

阅读量551

点赞数 2

分类专栏：每日一练文章标签： javascript 前端 ajax

于 2022-03-17 20:03:18 首次发布

本文链接：https://blog.csdn.net/qq_46580087/article/details/123558985

版权

Ajax 登录 JavaScript 异步请求服务器响应

关键词由CSDN通过智能技术生成

思路分析：

1.点击登录

2.获取输入框文本，非空判断

3.ajax发送

4.服务器响应

成功：跳转首页

失败：弹窗提示

代码：

 document.querySelector('#btnLogin').onclick = function () {
      let username = document.querySelector('#username').value
      let password = document.querySelector('#password').value
      if (username == '' || password == '') {
        return alert('输入框不能为空！')
      }

      //发送ajax请求
//(1).实例化ajax对象
      let xhr = new XMLHttpRequest()
//(2).设置请求方法和地址
      xhr.open('post', 'http://www.liulongbin.top:300