Ajax笔记_01（知识点、包含代码和详细解析）

Forever_Hopeful2023-08-02 20:01

Ajax_01笔记

前置知识点

  • 在JavaScript中

问题1：将数组转为字符串，以及字符串转为数组的方式。
问题2、将对象转为字符串，以及字符串转为对象的方法。

方法：

问题1：

  1. 将数组转为字符串可以使用 join() 方法。例如：var array = [1, 2, 3]; var str = array.join(',');，将数组 [1, 2, 3] 转为字符串 "1,2,3"。
  2. 将字符串转为数组可以使用 split() 方法。例如：var str = "1,2,3"; var array = str.split(',');，将字符串 "1,2,3" 转为数组 [1, 2, 3]。

问题2：

  1. 将对象转为字符串可以使用 JSON.stringify() 方法。例如：var obj = {name: "John", age: 25}; var str = JSON.stringify(obj);，将对象 {name: "John", age: 25} 转为字符串 "{\"name\":\"John\",\"age\":25}"。
  2. 将字符串转为对象可以使用 JSON.parse() 方法。例如：var str = "{\"name\":\"John\",\"age\":25}"; var obj = JSON.parse(str);，将字符串 "{\"name\":\"John\",\"age\":25}" 转为对象 {name: "John", age: 25}。请注意，字符串必须符合 JSON 格式的要求。

01_什么是Ajax和axios使用

定义
  • Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式Web应用程序的技术。它通过在不重新加载整个页面的情况下与服务器通信，实现异步数据传输和更新。使用Ajax，可以在用户与网页交互时，向服务器发送请求并接收响应，然后使用JavaScript动态更新页面的部分内容。这样可以提供更流畅和高效的用户体验，减少了不必要的页面刷新。Ajax广泛用于创建各种Web应用，如动态表单验证、自动补全搜索、实时更新等。它基于Web标准技术，包括HTML、CSS、JavaScript和XML/JSON数据格式。
怎么学习Ajax?
    1. 先使用axios 库，与服务器进行数据通行。
      • 基于XMLHttpRequest封装、代码简单使用次数高。
      • Vue、React项目中都会用到axios。
    1. 在学习XMLHttpRequest对象的使用，了解Ajax底层原理。
axios的使用
语法：
代码示例

需求：请求目标资源地址，拿到省份列表数据，显示到页面。

目标资源地址：http://hmajax.itheima.net/api/province

html 复制代码 
<body>
    <!-- 
        axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
        省份数据地址: http://ajax-api.itheima.net/api/province

        目标：使用axios库，获取省份列表数据，展示到页面上
    -->

    <p class="isP"></p>

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

    <script>
        // 引入后得到一个axios函数，并使用axios函数
        axios({
            // 资源路径地址
            url: 'http://ajax-api.itheima.net/api/province'
        }).then(result => { //result为回调函数的形参
            // 查看服务器返回的调函数
            console.log(result)
            // 查看返回值里面的内容
            console.log(result.data.data)
            // 查看返回中message的返回状态
            console.log(result.data.message)
            // 将返回的数组转为字符串
            console.log(result.data.data.join('<br>'))

            // 插入到标签容器中，渲染视图
            document.querySelector('.isP').innerHTML = result.data.data.join('<br>')

        })
    </script>
</body>

02_认识URL

URL：统一资源定位符，简称网址，用于访问网络上的资源。

新闻数据地址: http://hmajax.itheima.net/api/news

  1. http是协议
  2. hmajax.itheima.net是域名
  3. api/news是资源路径地址

03_查询参数

params查询参数
  • params是一个查询参数对象：语法格式为params: {参数名：值} 。参数名是接口文档中提供的。

  • 作用：使用查询参数提供额外信息，获取对应的数据。

    使用params ，里面添加携带的参数名和参数值即可。

  • 代码演示
html 复制代码 
<p></p>
  <!-- 
    城市列表: http://hmajax.itheima.net/api/city
    参数名: pname
    值: 省份名字
  -->
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    axios({
      url: 'http://hmajax.itheima.net/api/city',
      // 携带查询参数
      params: {
        pname: '浙江省'   //后期这里输入的查询值就是让 用户输入的。
      }
    }).then(result => {
      console.log(result.data.list)
      document.querySelector('p').innerHTML = result.data.list.join('<br>')
    })
  </script>

04_查询地区案例

  • 需求：根据用户输入的省份和市区，查询该市区的数据，并渲染到容器视图中。
代码示例
javascript 复制代码 
  <script>
    /*
      获取地区列表: http://hmajax.itheima.net/api/area
      查询参数:
        pname: 省份或直辖市名字
        cname: 城市名字
    */


        // 获取用户需要查询的内容值
    const province = document.querySelector('.province')
    const city = document.querySelector('.city')


    // 1、这个模块功能是从用户点击事件开始，所以先绑定点击事件
    document.querySelector('.sel-btn').addEventListener('click', () => {
      // 2、点击完后，就执行axios函数
      axios({
        // 3、向服务器发送查询请求
        url: 'http://hmajax.itheima.net/api/area',
        // 4、携带用户输入的查询参数
        params: {
          pname: province.value,
          cname: city.value
        }
      }).then(result => {
        console.log(result.data.list)
        console.log(result.data.message)
        const list  = result.data.list
        // 5、将返回的数组使用map方法操作插入到标签中然后返回新的数组，将新的数组转为字符串形式
       const res = list.map(item => `<li class="list-group-item">${item}</li>`).join('')  //得到了操作后的新数组，在转字符串
      //  6、 将map返回的新数组插入到页面视图中
        document.querySelector('.list-group').innerHTML = res
        console.log(res)
      })
    })

  </script>

map语句的详细解释:

首先，我们有一个res数组。通过map方法，对数组中的每个元素进行处理。箭头函数表达式(item =>

  • ${item}

  • )接收一个参数 item，并返回一个字符串模板，生成一个带有 item值的 <li>元素。

    然后，通过join('')方法将所有处理后的字符串连接在一起，形成一个字符串。

    最终，我们得到一个名为theLi的字符串，其中包含了循环处理后的<li>元素。

05_常用请求方法和数据提交

method: 请求方法，GET可以省略不写（不区分大小写）

data：提交数据

需求： 注册用户: url: 'http://hmajax.itheima.net/api/register,

请求方法: POST

参数名:

​ username: 用户名 (中英文和数字组成, 最少8位)

​ password: 密码 (最少6位)

目标: 点击按钮, 通过axios提交用户和密码, 完成注册

代码示例
javascript 复制代码 
   // 1、注册点击事件
   document.querySelector('.btn').addEventListener('click', () => {
     // 2、使用axios函数发送请求
     axios({
       url: 'http://hmajax.itheima.net/api/register',
       // 3、声明请求方法
       method: 'POST',
       // 4、提交数据
       data: {
         username: 'itheima007',
         password: '7654321'
       }
     }).then(result => {         // 5、查看浏览器响应的结果
       // 浏览器响应状态信息
       console.log(result.data.message)    //无账号
       console.log(result.data)    
     })
   })

需要提交数据，就得使用post 同时使用data携带需要提交的参数 （params是查询的参数，不要混淆了）

06_axios错误处理

在then方法后面写一个catch方法，传入回调函数并定义形参

代码示例
javascript 复制代码 
.then(result => {
      console.log(result)
    }).catch(error => {
      // 错误信息处理
      console.log(error)
      console.log(error.response.data.message)
    })

console.log(error.response.data.message) 就能得到具体的错误信息我们可以将返回的信息通过弹窗返回给用户

07_HTTP协议-请求报文

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

请求报文

请求报文：浏览器按照http协议要求的格式，发送给服务器的内容（就是axios里面的内容）。

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

通过chrome 开发者工具中的网络来进行查看

08_请求报文-错误排查

在保证自己测试没问题的时候，使用开发者工具中的网络选项卡进行查看我们报错的信息，观察后对代码进行改进（这样精确定位提高效率）

09_HTTP协议-响应报文

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

响应报文
  • 响应报文：服务器按照http协议要求的格式，返回非浏览器的内容
响应报文的组成
  1. 响应行：（状态行）：协议、http响应状态码，返回给浏览器的内容
  2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
  3. 空行：分隔请求头，空行之后的是发送给服务器的资源
  4. 响应体：返回的资源
响应状态码
状态码 说明
1xx 信息
2xx 成功
3xx 重定向消息
4xx 客户端错误
5xx 服务端错误

例如;404表示（服务器找不到资源）

可以再网络中的响应中查看服务器相应的结果

10_接口文档

接口文档：描述接口的文章

接口：使用Ajax和服务器通讯时，使用的URL，请求方法，以及参数。

重点：就是在于学会看着接口文档的需求来编写代码。

11_用户登录案例

需求
  1. 点击登录时，判断用户名和密码长度
  2. 提交数据和服务通信
  3. 响应提示消息渲染
代码示例
javascript 复制代码 
 <script>
   // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
   document.querySelector('.btn-login').addEventListener('click', () => {
     // 1、获取用户名和密码框以及value值
     const username = document.querySelector('.username').value
     const password = document.querySelector('.password').value
     console.log(username,password)
     // 2、点击登录时，判断用户名和密码长度
     if (username.length < 8 || username.length > 16) {
       alert('用户名不合法')
       return
     } else if (password.length < 6 || password.length > 16) {
       alert('密码不合法')
       return
     } else {
       axios({
         url: 'http://hmajax.itheima.net/api/login',
         method: 'post',
         data: {
           username,
           password
         }
       }).then((result) => {
         // 返回服务器响应的状态
         alert(result.data.message)
       }).catch((error) => {
         // 返会服务器响应的错误信息
         alert(error.response.data.message) 
       })
     }

   })
 </script>
优化提示框后的代码

直接上代码

javascript 复制代码 
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息

    /* 
      * 提示框需求分析
      * 1、获取提示框标签
      * 2、封装一个函数，用于渲染视图。
      * 3、设置提示文字，以及对应的颜色，成功为绿色，失败为红色
      * 4、为了让提示框自动隐藏，我们添加一个延迟函数
    */
    //  1.获取提示框标签
    const Alert = document.querySelector('.alert-success')
    function getAlert(message, flag) {
      // 3.设置提示文字，以及对应的颜色
      Alert.innerHTML = message
      Alert.classList.add('show')
      // flag ? 'alert-succes' : 'alert-danger'
      // console.log(flag ? 'alert-succes' : 'alert-danger')
      Alert.classList.add(flag ? 'alert-succes' : 'alert-danger')
      // 4.声明一个延迟函数，用于一定事件后隐藏提示框（也就是移除类名）
      setTimeout(() => {
      Alert.classList.remove('show')
      // 提示框颜色类名重置，也就是本次使用完清除
      Alert.classList.remove(flag ? 'alert-succes' : 'alert-danger')

      }, 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) {
        // 调用函数，渲染当前提示信息
        getAlert('用户名必须大于等于8位', false)
        console.log('用户名必须大于等于8位')
        return // 阻止代码继续执行
      }
      if (password.length < 6) {
        // 调用函数渲染当前提示信息
        getAlert('密码必须大于等于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 => {
        // 调用提示框渲染函数，然后将返回值当做实参
        getAlert(result.data.message,true)
        console.log(result)
        console.log(result.data.message)
      }).catch(error => {
         // 调用提示框渲染函数，然后将返回值当做实参
        getAlert(error.response.data.message,false)
        console.log(error)
        console.log(error.response.data.message)
      })
    })
  </script>

12_form-serialize插件使用

作用：

作用： 快速收集表单元素的值

语法

语法： const data = serialize(form,{hash: true,empty: true})

  • serialize函数里面的form可以获得表单中所有name属性标签的值
  1. 把插件引入到自己的网页中

  • 2、 使用serialize函数，快速收集表单元素的值
    参数1、需要获取哪个表单的数据

    • 表单元素设置 name 属性，值会作为对象的属性名

      • 建议 name 属性的值，最好和接口文档参数名一致

      • 参数2、配置对象

        • hash 设置获取数据结构

      • true： js对象 （推荐使用true，因为将获得的对象可以提交给服务器）

      • false： 查询字符串

        • empty 设置是否取空值

      • true： 获取空值（推荐）

      • false： 不获取空值

目标

目标：在点击提交时，使用form-serialize插件，快速收集表单元素值

代码示例
html 复制代码 
  <form action="javascript:;" class="example-form">
    <input type="text" name="username">
    <br>
    <input type="text" name="password">
    <br>
    <input type="button" class="btn" value="提交">
  </form>


  <!-- 引入serizlize插件 -->
  <script src="../lib/form-serialize.js"></script>

  <script>
	//获取按钮标签，注册点击事件
    document.querySelector('.btn').addEventListener('click', () => {

    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: false ,empty: true})
      console.log(data)
    })
  </script>
  • 对参数有问题可以看上面的语法

serialize案例

使用插件替代原生js 获取元素的写法。

代码演示

将serialize获取到的js对象，通过 对象解构 拿到里面的值。然后直接传递给axios函数里面的提交数据给服务器

javascript 复制代码 
      // 3.1 使用serialize插件
      const form = document.querySelector('.form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)   //{username: 'itheima007', password: '7654321'}
      // 3.2 利用对象 解构 进行取值 由于属性名和属性值相同，此处简写
      const { username, password} = data

      // 1.2 获取用户名和密码
      // const username = document.querySelector('.username').value
      // const password = document.querySelector('.password').value
      console.log(username, password)
  • serialize函数里面的form可以获得表单中所有name属性标签的值
相关推荐
Moonnnn.25 分钟前
51单片机学习——动态数码管显示
笔记·嵌入式硬件·学习·51单片机
Σίσυφος19001 小时前
halcon 条形码、二维码识别、opencv识别
前端·数据库
学代码的小前端1 小时前
0基础学前端-----CSS DAY13
前端·css
css趣多多2 小时前
案例自定义tabBar
前端
电棍2333 小时前
verilog笔记
笔记·fpga开发
让我安静会3 小时前
Obsidian·Copilot 插件配置（让AI根据Obsidian笔记内容进行对话）
人工智能·笔记·copilot
姑苏洛言3 小时前
DeepSeek写微信转盘小程序需求文档，这不比产品经理强？
前端
林的快手3 小时前
CSS列表属性
前端·javascript·css·ajax·firefox·html5·safari
世事如云有卷舒4 小时前
FreeRTOS学习笔记
笔记·学习
匹马夕阳4 小时前
ECharts极简入门
前端·信息可视化·echarts
热门推荐
01DeepSeek各版本说明与优缺点分析02如何在WPS和Word/Excel中直接使用DeepSeek功能03DeepSeek本地部署详细指南04太炸裂了！清华大学deepseek从入门到精通使用手册又出第三版了，《普通人如何抓住DeepSeek红利》（无套路，直接下载）05本地部署DeepSeek教程（Mac版本）06DeepSeek r1本地安装全指南07DeepSeek RAGFlow构建本地知识库系统08本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程09DeepSeek R1本地化部署 Ollama + Chatbox 打造最强 AI 工具10【docker】Windows10安装Docker Desktop - WSL update failed