AJAX 1——axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

学习使我快乐012024-10-05 8:28

AJAX 1------axios体验、认识URL、常用请求方法、HTTP协议、错误处理、form-serialize插件

1.AJAX入门与体验axios

  • 定义 ：浏览器与服务器进行数据通信的技术

  • 体验axios库，与服务器通信

    • 引入axios.js
    • 使用axios函数
    js 复制代码 
    <p class="my-p"></p>
    <!-- 1.引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 2.使用axios函数
        axios({
            url: 'http://ajax-api.itheima.net/api/province'
        }).then(result => {
            console.log(result)
            console.log(result.data.list)
            console.log(result.data.list.join('<br>'))
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })

2.认识URL

  • URL定义：统一资源定位符，简称网址，因特网上标准的资源的地址

  • URL组成：协议://域名/资源路径

    • 协议：规定浏览器与服务器之间传输数据的格式
    • 域名：标记服务器在互联网的方位
    • 资源路径：标记资源在服务器下的具体路径

  • URL查询参数

    • 浏览器提供给服务器额外的信息，让服务器返回浏览器想要的数据

    • 语法：http://xxxx.com/xxx/xxx?参数名1=值1\&参数名2=值2

    • 使用params选项，axios在运行时会把参数名和值拼接到url?参数名=值

      js 复制代码 
      <!-- 1.引入axios库 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
        // 2.使用axios函数
        axios({
            url: 'http://hmajax.itheima.net/api/city',
            params: {
                pname: '陕西省'
            }
        }).then(result => {
            document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
        })

  • 案例：地区查询（通过多个参数查询）

    html 复制代码 
    <!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>
    /*
      获取地区列表: 
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */
    const button = document.querySelector('button')
    button.addEventListener('click', function () {
      const list = document.querySelector('.list-group')
      const province = document.querySelector('[name=province]').value
      const city = document.querySelector('[name=city]').value
      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname: province,
          cname: city
        }
      }).then(result => {
        // list.removeChild(document.querySelectorAll('.list-group-item'))
        console.log(result)
        const lists = result.data.list.map(function (item) {
          return `
           <li class="list-group-item">${item}</li>
           `
        }).join('')
        list.innerHTML = lists
      })
    })
  </script>
</body>

</html>

3.常用请求方法

  • Get：获取数据(默认)

  • POST：提交数据

    js 复制代码 
     document.querySelector('.btn').addEventListener
      ('click', () => {
        axios({
          url: 'http://hmajax.itheima.net/api/register',
          method: 'post',
          data: {
            username: 'xxg213421',
            password: '1233432'
          }
        }).then(result => {
          console.log(result)
        })
      })

  • PUT：修改数据

  • DELETE：删除数据

  • PATCH：修改数据（部分）

  • axios请求配置：

    • url：请求的URL网址
    • method：请求的方法，GET可以省略
    • data：提交的数据

4.axios错误处理

  • 在then方法后面，通过点语法调用catch方法，传入回调函数并定义形参

    js 复制代码 
    document.querySelector('.btn').addEventListener
      ('click', () => {
        axios({
          url: 'http://hmajax.itheima.net/api/register',
          method: 'post',
          data: {
            username: 'xxg213421',
            password: '1233432'
          }
        }).then(result => {
          console.log(result)
        }).catch(error => {  //处理错误信息
          console.log(error.response.data.message)
          alert(error.response.data.message)
        })
      })

5.HTTP协议

  • HTTP协议：规定了浏览器发送及服务器返回内容的格式

  • 请求报文：浏览器按照HTTP协议要求的格式，发送给服务器的内容

    • 组成部分4个：

      • 请求行 ：请求方法，URL，协议
      • 请求头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔请求头与请求体
      • 请求体：发送的资源

    • 怎么在浏览器中查看：右键检查------>网络------>Fetch/XHR------>选择某次想要看的信息进行查看

    • 通过请求报文进行错误排查------去看报文中的载荷，以及响应结果

  • 响应报文：服务器按照HTTP协议要求的格式，返回给浏览器的格式

    • 组成部分4个：

      • 响应行 ：协议，HTTP响应状态码，状态信息
      • 响应头：以键值对的格式携带的附加信息，eg:Content-Type
      • 空行：分隔响应头和响应体
      • 响应体：返回的资源

    • HTTP响应状态码：

      状态码 说明
      1XX 信息
      2XX 成功
      3XX 重定向消息
      4XX 客户端错误（浏览器）
      5XX 服务器错误

6.接口文档

  • 定义 ：后端 提供的描述接口的文档，接口就是使用AJAX和服务器通讯时，使用的URL，请求方法以及参数

  • 登录注册案例：(注意这里的服务器及接口是别人的，可以自己写)

    • 注册：这里的注册没有使用输入框数据,直接通过代码发送的
    js 复制代码 
    <script>
    /*
      注册用户: http://hmajax.itheima.net/api/register
      请求方法: POST
      参数名:
        username: 用户名 (中英文和数字组成, 最少8位)
        password: 密码 (最少6位)

      目标: 点击按钮, 通过axios提交用户和密码, 完成注册
    */
    document.querySelector('.btn').addEventListener
      ('click', () => {
        axios({
          url: 'http://hmajax.itheima.net/api/register',
          method: 'post',
          data: {
            username: 'lyq20040110',
            password: '20040110'
          }
        }).then(result => {
          console.log(result)
        }).catch(error => {  //处理错误信息
          console.log(error.response.data.message)
          alert(error.response.data.message)
        })
      })
  </script>

  • 登录：和前面注册用的服务器是同一个，所以上面注册的信息可以登陆成功

    js 复制代码 
    <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>12.案例_登录_提示消息</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" 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：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    //获取提示框
    //功能：
    //1.显示提示框
    //2.不同提示文字，成功绿色不成功红色
    //3.两秒后自动消失
    const myAlert = document.querySelector('.alert')
    function alertFn(isSuccess, msg) {
      myAlert.classList.add('show')
      myAlert.innerHTML = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)
      setTimeout(() => {
        myAlert.classList.remove('show')
        //重置背景色
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }
    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 1.2 获取用户名和密码
      const username = document.querySelector('.username').value
      const password = document.querySelector('.password').value
      // console.log(username, password)

      // 1.3 判断长度
      if (username.length < 8) {
        console.log('用户名必须大于等于8位')
        alertFn(false, '用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        console.log('密码必须大于等于6位')
        alertFn(false, '密码必须大于等于6位')
        return // 阻止代码继续执行
      }

      // 1.4 基于axios提交用户名和密码
      // console.log('提交数据到服务器')
      axios({
        url: 'http://hmajax.itheima.net/api/login',
        method: 'POST',
        data: {
          username,
          password
        }
      }).then(result => {
        console.log(result)
        console.log(result.data.message)
        alertFn(true, '登陆成功')


      }).catch(error => {
        console.log(error)
        console.log(error.response.data.message)
        alertFn(false, '用户名或密码不正确')

      })
    })
  </script>
</body>
</html>

7.form-serialize插件

  • 作用：快速收集表单元素的值
js 复制代码 
<body>
  <form action="javascript:;" class="example-form">
    <input type="text" name="uname">
    <br>
    <input type="text" name="pwd">
    <br>
    <input type="button" class="btn" value="提交">
  </form>
  <!-- 
    目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
  -->
  <!-- 引入插件 -->
  <script src="./form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      // 使用serialize函数
      const form = document.querySelector('.example-form')
      //参数1：获取哪个表单参数 
      //**表单属性要设置name值，值会作为对象的属性名
      //**建议name属性的值和接口文档参数名一致 
      //参数2：配置对象
      //**hash:设置获取的数据结构------推荐为true
      //****true:JS对象
      //****false:查询字符串------推荐为true
      //**empty:是否获取空值
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)

    })
  </script>
</body>
</html>
相关推荐
GIS程序媛—椰子44 分钟前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
阑梦清川1 小时前
JavaEE初阶---网络原理（五）---HTTP协议
网络·http·java-ee
王大锤43911 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
阿尔帕兹2 小时前
构建 HTTP 服务端与 Docker 镜像：从开发到测试
网络协议·http·docker
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解