【AJAX】让数据活起来&axios使用

目录

一、什么是AJAX？

1. 怎么用 AJAX ？

2. axios 使用

3. 认识 URL

4. URL 查询参数

5. 常用请求方法

6. axios 错误处理

7. HTTP 协议－请求报文

8. 接口文档

9. form-serialize 插件

总结不易~本章节对我有很大收获，希望对你也是~~~~

一、什么是AJAX？

定义：

AJAX（Asynchronous JavaScript and XML） 是一种用于在 网页与服务器之间进行异步数据通信 的技术。它允许网页在不刷新整个页面的情况下从服务器获取或发送数据，从而提高用户体验。

尽管名字中有 "XML"，但实际上 AJAX 并不局限于 XML，现代开发中更常用 JSON（JavaScript Object Notation） 作为数据格式。

概念：AJAX 是浏览器与服务器进行 数据通信 的技术

1. 怎么用 AJAX ？

2. axios 使用

2. 使用axios函数

        1）传入配置对象
        2）再用 .then 回调函数接收结果，并做后续处理

axios({
url: '目标资源地址'
}).then((result) => {
// 对服务器返回的数据做后续处理
})

eg1:资料自取

url: http://hmajax.itheima.net/api/province

result就是可以直接返回服务器获取的结构，然后对获取的省份用join('<br>')来进行分割

3. 认识 URL

URL（Uniform Resource Locator，统一资源定位符） 是 互联网上资源的地址，用于定位网页、图片、视频等各种资源。简单来说，它就是你在浏览器地址栏输入的网址。

https://api.example.com/users?name=Tom&age=18

协议

域名

资源路径

获取 - 新闻列表

  <div></div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/news'
    }).then((result) => {
      console.log(result)
      console.log(result.data)
      console.log(result.data.data[0])
      let value = result.data.data
      console.log(value)
      let arr = []
      for (let i = 0; i < 5; i++) {
        console.log(value[i].title)
        arr.push(value[i].title)
      }
      console.log(arr)
      document.querySelector('div').innerHTML = arr.join('<br>')
    })
  </script>

4. URL 查询参数

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

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

 axios－查询参数-- params选项

axios({
url: 'http://hmajax.itheima.net/api/city',
params: {
    pname: '河北省'
}
}).then(result => {
    // 对服务器返回的数据做后续处理
})

地区查询

在 axios 里，params 选项用于拼接 URL 查询参数，它是一个对象（Object），其完整写法如下： 

       params: {
          pname: pname, // 传递字符串
          cname: cname
        }

• params 里的键值对是 键（Key）和值（Value） 的映射关系（类似 hash 映射）。
• 键：pname 和 cname 是请求的参数名称，它们会自动添加到 URL 的查询参数中。
• 值：pname 和 cname 变量存储的是 input 输入框的值，它们将被当作字符串传递到服务器。

因为 对象的键和值相同时，可以省略值的重复写法。

params: { pname, cname }

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */

    let btn = document.querySelector('.btn')
    btn.addEventListener('click', function () {
      let pname = document.querySelector('.province').value
      let cname = document.querySelector('.city').value

      console.log(pname)

      axios({
        url: 'http://hmajax.itheima.net/api/area',
        params: {
          pname, // 传递字符串
          cname
        }
      }).then(result => {
        console.log(result)
        let list = result.data.list
        console.log(list)
        let theLi = list.map(areaName => `<li class="list-group-item">${areaName}</li>`).join('')
        console.log(theLi)
        document.querySelector('.list-group').innerHTML = theLi
      })

    })
</script>

5. 常用请求方法

1. 请求方法表明对服务器资源的操作， 最为常用 的2个是？

2. axios 的核心配置？

1. url：请求 URL 网址
2. method ：请求方法， GET 可以省略（不区分大小写）
3. params：查询参数
4. data ：提交数据

如图很好理解：

6. axios 错误处理

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

    document.querySelector('.btn').addEventListener('click', () => {
      axios({
        url: 'http://hmajax.itheima.net/api/register',
        // 指定请求方法
        method: 'post',
        data: {
          username: 'itheima007',
          password: '7654321'
        }
      }).then(result => {
        console.log(result)
      }).catch(error => {
        console.log(error)
        alert(error.response.data.message)
      })
    })

7. HTTP 协议－请求报文

1.  请求行：请求方法，URL，协议
2. 请求头：以键值对的格式携带的附加信息，比如：Content-Type
3.  空行：分隔请求头，空行之后的是发送给服务器的资源
4. 请求体：发送的资源

2）通过 Chrome 的网络面板查看请求报文

HTTP 协议－响应报文

HTTP 响应状态码

8. 接口文档

案例－用户登录

1. 点击登录时，判断用户名和密码长度
2. 提交数据和服务器通信
3. 提示信息
4. 第一步就是获取点击事件，再判断用户名和密码的长度
5. 通过就进行axois进行数据提交和错误接收
6. 最后创建一个函数alertFn() 通过传入参数msg 文字提示信息 和 是否登录成功的判断isSuccess来决定该显示框的颜色

这里推荐一个超好用的网址：https://v5.bootcss.com/docs/getting-started/introduction/

 可以进行多种方法的文档查询

通过引入bootstrap后就可以直接使用该方法，只需要对该div进行添加该class命名即可：

  <!-- 引入bootstrap.css -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息

    const Alert = document.querySelector('.alert')
    // 2.2 封装提示框函数 重复调用 满足提示需求
    // 功能： 
    // 1. 显示提示框
    // 2. 不同提示文字msg 和成功绿色失败红色isSuccess
    // 3. 过2秒后，让提示框自动消失

    function alertFn(msg, isSuccess) {
      // 1. 显示提示框
      Alert.classList.add('show')

      // 2. 接收文字和显示颜色
      const text = isSuccess ? 'alert-success' : 'alert-danger'
      Alert.innerHTML = msg
      Alert.classList.add(text)

      // 3. 2秒后消失
      setTimeout(() => {
        Alert.classList.remove('show')
        Alert.classList.remove(text)
      }, 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) {
        alertFn('用户名必须大于等于8位', false)
        console.log('用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        alertFn('密码必须大于等于6位', false)
        console.log('密码必须大于等于6位')
        return // 阻止代码继续执行
      }

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

9. form-serialize 插件

作用：快速获取表单数据并转换为对象。

用法：

const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })

<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插件，快速收集表单元素值
  -->
  <!-- 1. 把插件引入到自己的网页代码中 -->
  <script src="./lib/form-serialize.js"></script>
  <script>
    document.querySelector('.btn').addEventListener('click', () => {
      //  2. 使用serialize函数 快速收集表单元素的值
      // 参数1 要获取哪个表单的数据
      // 表单元素设置name属性 值会作为对象的属性名  
      // 参数2 配置对象
      // hash 设置获取数据结构
      // - true JS对象（推荐） 一般请求体里提交给服务器
      // - false 查询字符串
      // empty 设置是否获取空值
      // - true 获取空值（推荐） 数据结构和标签结构一致
      // - false 不获取空值

      const form = document.querySelector('.example-form')
      const data = serialize(form, { hash: true, empty: true })
      // const data = serialize(form, { hash: false, empty: true })
      // const data = serialize(form, { hash: true, empty: false })
      console.log(data)

    })
  </script>
</body>

解包，快速获得多个表单数据：

      // 设置表单 name属性的值
      const form = document.querySelector('.login-form')
      console.log(form)
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)


      // 1.2 获取用户名和密码
      // const username = document.querySelector('.username').value
      // const password = document.querySelector('.password').value
      // console.log(username, password)

      // 解包
      // const { username, password } = data
      const { username: username, password: password } = data

总结不易~本章节对我有很大收获，希望对你也是~~~~