JS第二十二次笔记1 笔记目录 1.1 AJAX概念和axios使用 1.1.1 AJAX的定义：是浏览器和服务器通信的

1 笔记目录

1.1 AJAX概念和axios使用

1.1.1 AJAX的定义：是浏览器和服务器通信的技术

1.1.2 AJAX的使用方法

1.1.3 axios的使用

1.1.3.1 axios在线地址

axios在线地址

1.1.3.2使用示例：

目标资源地址

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAXg概念和axios</title>
</head>

<body>
  <div></div>
  <!-- 1.引入axios js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
  </script>
  <script>
    console.log(axios)
    // 使用axios给提供的函数,进行数据请求
    axios({
      url: 'https://ajax-api.itheima.net/api/province'
    }).then(function (result) {
      // 在then回调函数中，第一个参数就是服务端返回的数据结果
      // console.log(result)
      // console.log(result.data.data)
      const data = result.data.data
      // 把省份回显到页面中
      // join是拼接字符串的方法，想要每个省份占据一行，只要在拼接字符串的时候，把每个省份用<br>换行即可
      document.querySelector('div').innerHTML = data.join('<br>')
    })
  </script>
</body>

</html>

结果：

1.2 认识URL

1.2.1 什么是URL

1.2.2 URL的组成

1.2.2.1 协议

1.2.2.2 域名

1.2.2.3 资源地址

1.2.3 URL查询参数

1.2.4 案例

1.2.4.1 案例——新闻列表获取

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AJAXg概念和axios</title>
</head>

<body>
  <div></div>
  <!-- 1.引入axios js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">
  </script>
  <script>
    console.log(axios)
    // 需求：访问新闻数据地址，并把数据展示在页面上
    axios({
      url: 'https://ajax-api.itheima.net/api/news'


    }).then(result => {
      // axios返回的数据，会被axios进行包装,所以需要解构出data
      // console.log(result.data.data)
      // 结构出data中的data，格式如下
      const { data: { data } } = result
      console.log(data)
    })
  </script>
</body>

</html>

结果：

1.2.4.2 案例——地区查询

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>04.案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>

<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */
    //  需求：点击查询按钮，获取数据，根据数据发送请求
    const pnameDom = document.querySelector('[name=province]')
    const cnameDom = document.querySelector('[name=city]')
    //1.绑定事件
    document.querySelector('.sel-btn').addEventListener('click', e => {
      // 2.获取数据
      // console.log(cnameDom.value)
      // console.log(pnameDom.value)
      //3.根据数据发送请求
      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname: pnameDom.value,
          cname: cnameDom.value
        }
      }).then(result => {
        // console.log(result)
        const { list } = result.data
        // console.log(list)
        //4. 渲染页面 map+join
        document.querySelector('.list-group').innerHTML = list.map(item => {

          return `<li class="list-group-item">${item}</li>`
        }).join('')
      })
    })
  </script>
</body>

</html>

1.3 常用请求方式和数据提交

1.3.1 较常见的请求方式：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05.常用请求方法和数据提交</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    */
    //  1.点击事件注册
    document.querySelector('.btn').addEventListener('click', e => {
      // 2. 通过axios提交用户和密码（自己造数据）
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',//post可大写可小写
        //查询参数 parmas:{键：值}
        // 提交参数 data:{键：值}
        data: {
          username: 'zha54ngsa898n',
          password: '123458946'
        }
      }).then(res => {
        alert(res.data.message);
      })
    })
  </script>
</body>

1.3.2 数据提交

1.4 axios错误处理

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05.常用请求方法和数据提交</title>
</head>

<body>
  <button class="btn">注册用户</button>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    */
    //  1.点击事件注册
    document.querySelector('.btn').addEventListener('click', e => {
      // 2. 通过axios提交用户和密码（自己造数据）
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        method: 'post',//post可大写可小写
        //查询参数 parmas:{键：值}
        // 提交参数 data:{键：值}
        data: {
          username: 'zha54ngsa898asn',
          password: '123458946'
        }
      }).then(res => {
        alert(res.data.message);
      })
        //错误处理
        .catch(error => {
          alert(error.response.data.message);
        })
    })
  </script>
</body>

</html>

1.5 HTTP协议——报文

1.5.1 请求报文

1.5.2 请求报文——错误排查

注意：要先打开控制台再执行操作，否则不能捕捉到报文

1.5.3 HTTP协议——响应报文

1.5.4 响应状态码

1.6 接口文档

（后端工程师）
使用文档示例

1.7 案例

1.7.1 案例1——用户登录

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>11.案例_登录</title>
  <!-- 引入bootstrap.css -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
  <!-- 公共 -->
  <style>
    html,
    body {
      background-color: #EDF0F5;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .container {
      width: 520px;
      height: 540px;
      background-color: #fff;
      padding: 60px;
      box-sizing: border-box;
    }

    .container h3 {
      font-weight: 900;
    }
  </style>
  <!-- 表单容器和内容 -->
  <style>
    .form_wrap {
      color: #8B929D !important;
    }

    .form-text {
      color: #8B929D !important;
    }
  </style>
  <!-- 提示框样式 -->
  <style>
    .alert {
      transition: .5s;
      opacity: 0;
    }

    .alert.show {
      opacity: 1;
    }
  </style>
</head>

<body>
  <div class="container">
    <h3>欢迎-登录</h3>
    <!-- 登录结果-提示框 -->
    <div class="alert alert-success alert-danger" role="alert">
      提示消息
    </div>
    <!-- 表单 -->
    <div class="form_wrap">
      <form>
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password">
        </div>
        <button type="button" class="btn btn-primary btn-login"> 登 录 </button>
      </form>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    const uname = document.querySelector('.username');
    const password = document.querySelector('.password');
    // 1.1给按钮注册click事件
    document.querySelector('.btn-login').addEventListener('click', e => {
      // 1.2 判断用户名和密码长度
      if (uname.value.length < 8) {
        return alertFn('用户名不符合要求', false);

      }
      if (password.value.length < 6) {
        return alertFn('密码不符合要求', false);

      }
      // 2. 将数据提交至服务器与其交互=>看文档
      axios({
        url: 'https://hmajax.itheima.net/api/login',
        method: 'post',//可大写也可小写
        data: {
          username: uname.value,
          password: password.value
        }

      }).then(res => {
        // console.log(res);
        alertFn(res.data.message, true);
      }).catch(err => {
        // console.log(err);
        alertFn(err.response.data.message, false)
      })
    })

    // 3. 封装一个提示框函数
    function alertFn(msg, flag) {
      // 3.1 接收到参数之后，给标签alter替换内容,让标签显示
      // 获取弹框
      const alertDom = document.querySelector('.alert')
      alertDom.innerHTML = msg
      // console.log(msg);
      // alterDom.style.opacity = 1;
      // 使用类名达到与opacity=1的效果
      alertDom.classList.add('show')

      const str = flag ? 'alert-success' : 'alert-danger'
      // console.log(str)
      alertDom.classList.add(str)
      // className会覆盖之前的className
      // alert.className = 'alert' + str
      //延迟隐藏弹出框
      setTimeout(function () {
        alertDom.classList.remove('show')
        alertDom.classList.remove(str)
      }, 800)
    }
    // alertFn('用户名错误', true);
    // alertFn('密码错误', true);
    // alertFn('登录成功', false);

  </script>
</body>

</html>