• Ajax基础概念和接口及Axios语法和FormData


    一、Ajax基础概念

    1.服务器

    • 存储网络资源的一台电脑
    • 数据:是存在于服务器的

    2.请求&响应

    2.1 请求
    1. 客户端向服务器要资源的过程
    2. 客户端向服务器提交资源的过程
    3. 通过URL地址,连接到服务器,广义上讲都叫做请求
    4. 请求是客户(客户端)发送的
    2.2 响应

    客户端发送了请求,服务器做出的回应,叫做响应
    响应是服务器做出的

    3.请求方式

    不同的请求目的,对应着不同的请求方式

    • 查询获取数据: GET
    • 添加数据: POST
    • 删除数据: DELETE
    • 修改数据:
      • PUT 侧重于完整的修改
      • PATCH 侧重于部分修改

    二、接口和接口文档

    1.使用params,还是data:

    看接口文档即可:

    • 接口文档描述Query参数查询参数,使用params
    • 接口文档描述body参数请求体,使用data

    三、Axios语法

    Axios的语法是固定的,参考网站:https://www.axios-http.cn/

    Ajax库介绍

    官方网站:https://www.npmjs.com/package/axios

    中文网站1:https://www.axios-http.cn/

    中文网站2:http://www.axios-js.com/zh-cn/docs/

    1.语法:
    Axios({请求的配置}).then(result=>{})
    
    • 1
    2.请求方法的别名:

    GET和DELETE

    axios.get(url,可选的配置对象)
    
    • 1

    POST/PUT和PATCH

    axios.post(url,data,可选的配置对象)
    
    • 1
    3.全局配置根路径
    axios.defaults.baseURL='根路径'
    
    • 1
    4.拦截器

    axios拦截器:https://www.axios-http.cn/docs/interceptors

    四、FormData表单元素

    FormData 是一个浏览器内置对象。作用是用于获取表单数据。

    • 表单各项,必须有name属性
      • let fd = new FormData(表单) // 可以把表单中的数据收集到了
    • 单项按钮组,多个按钮,name属性要一致,才叫做一组
    • 单项按钮、复选按钮,都要设置value值,提交数据的时候,提交的是value值
    • 下拉框,name属性要给 select标签;value属性要给 option标签
    <form action="">
      单行文本框:
      <input type="text" name="username"><br />
      密码框:
      <input type="password" name="pwd"><br />
      单项按钮组:
      <input type="radio" value="nan" name="sex"><input type="radio" value="nv" name="sex"><br />
      复选按钮组:
      <input type="checkbox" name="hobby" value="cf">看书
      <input type="checkbox" name="hobby" value="sj">美食
      <input type="checkbox" name="hobby" value="ddd">旅行<Br />
      下拉框:
      <select name="address">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz">广州</option>
      </select><br />
      文件选择框:
      <input type="file"><br />
      多行文本框:
      <textarea name="intro" cols="30" rows="3"></textarea><br />
      隐藏域:
      <input type="hidden" name="id" value="100"><br />
      <!-- h5新增:
      <input type="color"> -->
    
      <!-- 表单中的按钮 -->
      <!-- 1.提交按钮(点击之后会造成表单提交) -->
      <button id="tijiao">提交按钮1</button>
      <button type="submit">提交按钮2</button>
      <input type="submit" value="提交按钮3">
      <hr>
      <!-- 2.普通按钮(点击之后不会有任何反应) -->
      <button type="button">普通按钮1</button>
      <input type="button" value="普通按钮2">
      <hr>
      <!-- 3.重置按钮(点击之后,会重置表单) -->
      <button type="reset">重置按钮1</button>
      <input type="reset" value="重置按钮2">
    </form>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    1.组织表单提交行为

    两个方案:

    <script src="./form-value.js"></script>
    <script>
      // 1. ------------- 点击按钮 ----------------------------------------
      // document.querySelector('button').addEventListener('click', function (e) {
      //   e.preventDefault()
      // })
    
      // 2. --------------- 阻止表单提交行为 ----------------------------
      document.querySelector('form').addEventListener('submit', function (e) {
        e.preventDefault()
        // 获取表单项的值
        // 使用插件,获取表单项的值。
        // 插件提供了 val() 方法,参数需要填form。
        // val() 是根据表单各项的name属性获取值的,所以表单各项必须得有name
        // let result = val(表单)
        let result = val(document.querySelector('form'))
        console.log(result)
      })
    </script>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 在以后提交数据的时候,可以找到提交按钮,注册click事件;
    • 也可以找到form,注册submit事件。
    • 最终的效果是一样的。

    2.应用代码

    <body>
      <form action="">
        用户名:<input type="text" name="username"><br />
        密 码:<input type="password" name="pwd"><br />
        性 别:<input type="radio" value="男" name="sex"><input type="radio" value="女" name="sex"><br />
        <button>提交</button>
      </form>
    
      <script src="./lib/axios.js"></script>
      <script>
        axios.defaults.baseURL = 'http://www.xxx'
        // 点击按钮,会造成表单提交,阻止默认行为,使用 FormData 收集表单数据,Ajax提交数据
        document.querySelector('button').addEventListener('click', function (e) {
          e.preventDefault() // 阻止默认行为
          // let fd = new FormData(表单)
          let fd = new FormData(document.querySelector('form'))
          // ajax提交数据,也就是提交 fd 
          axios.post('/xxx/formdata', fd).then(result => {
            console.log(result.data)
          })
        })
      </script>
    </body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    3.FormData相关的API

    • fd.append('键', 值) 向原有数据中,新增一个值
    • fd.delete('键') 从原有数据中,移除一个值
    • fd.set('键', 值) 修改原有数据中的一个值
    • fd.forEach((value, key) => {}) 变量查看对象中有哪些数据
    axios.defaults.baseURL = 'http://www.xxx'
    // 点击按钮,会造成表单提交,阻止默认行为,使用 FormData 收集表单数据,Ajax提交数据
    document.querySelector('button').addEventListener('click', function (e) {
      e.preventDefault() // 阻止默认行为
      // let fd = new FormData(表单)
      let fd = new FormData(document.querySelector('form'))
    +  // 1. 向原有数据中,新增一个值
    +  fd.append('phone', 1322323232)
    +  // 2. 从原有数据中,删除一个值
    +  fd.delete('pwd')
    +  // 3. 修改一个值
    +  fd.set('sex', '哈')
    +  // 4. 提交前,查看有哪些数据
    +  fd.forEach((value, key) => {
    +    console.log(key, value)
    +  })
      // ajax提交数据,也就是提交 fd 
      axios.post('/xxx/formdata', fd).then(result => {
        console.log(result.data)
      })
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    4.上传文件

    原理和提交其他文本值一样,只不过上传,提交的是一个文件而已。
    注意,文件选择框,name 必须是 avatar,因为这是接口要求的

    <body>
      <form action="">
        用户名:<input type="text" name="username"><br />
        密 码:<input type="password" name="pwd"><br />
        性 别:<input type="radio" value="男" name="sex"><input type="radio" value="女" name="sex"><br />
        头 像:<input type="file" name="avatar"><br />
        <button>提交</button>
      </form>
      <script src="./axios.js"></script>
      <script>
        axios.defaults.baseURL = 'http://www.xxx'
        document.querySelector('button').addEventListener('click', function (e) {
          e.preventDefault()
          // 收集表单中的数据
          let fd = new FormData(document.querySelector('form'))
          // 提交数据(数据中包括文件,提交数据,就相当于上传文件)
          axios.post('/xxx/formdata', fd).then(result => {
            console.log(result.data)
          })
        })
      </script>
    </body>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    5.上传头像

    给上传文件框,加name="avatar"

    自己加一个

    let file = document.querySelector('#iptFile')
    
    // 1. 点击普通按钮,能够选择图片
    document.querySelector('#btnChoose').addEventListener('click', function (e) {
      e.preventDefault()
      file.click() // 用代码的方式,触发元素的单击事件(相当于点击了文件选择框)
    })
    
    // 2. 当文件选择框内容改变后,开始上传文件
    file.addEventListener('change', function () {
      // console.log(123)
      let fd = new FormData(document.querySelector('form'))
      axios.post('http://www.xxx', fd).then(result => {
        // console.log(result.data)
        // 上传后,把图片展示出来
        document.querySelector('img').src = result.data.data.filename
      })
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    let file = document.querySelector('#iptFile')
    
    // 1. 点击普通按钮,能够选择图片
    document.querySelector('#btnChoose').addEventListener('click', function (e) {
      e.preventDefault()
      file.click() // 用代码的方式,触发元素的单击事件(相当于点击了文件选择框)
    })
    
    // 2. 当文件选择框内容改变后,开始上传文件
    file.addEventListener('change', function () {
      // console.log(123)
      let fd = new FormData(document.querySelector('form'))
      axios.post('http://www.xxx', fd).then(result => {
        // console.log(result.data)
        // 上传后,把图片展示出来
        document.querySelector('img').src = result.data.data.filename
      })
    })
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
  • 相关阅读:
    Linux 下安装python
    基于SSH的医院在线挂号系统设计与实现
    MIMO Enhanced covert communication
    Qt应用开发(基础篇)——向导对话框 QWizard
    【Python黑科技】获取每日一句美句,并定时发送邮件到指定邮箱(保姆级图文+实现代码)
    Diffusion Models可控视频生成Control-A-Video:论文和源码解读
    C++多重、多层、分层继承
    Windows安装Docker并创建Ubuntu环境及运行神经网络模型
    高等数学(第七版)同济大学 习题4-2(前半部分) 个人解答
    【JVM调优实战100例】01——JVM的介绍与程序计数器
  • 原文地址:https://blog.csdn.net/m0_62181310/article/details/126754385