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

已于 2024-10-04 20:39:36 修改
阅读量654 收藏 7
点赞数 10
分类专栏： AJAX+Node+Webpack+Git 文章标签： ajax http okhttp 前端 axios
于 2024-10-04 20:38:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72043867/article/details/142706959
版权

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

1.AJAX入门与体验axios

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

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

    • 引入axios.js
    • 使用axios函数
    <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?参数名=值

      <!-- 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>')
        })

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

    <!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：提交数据

     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方法，传入回调函数并定义形参

    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，请求方法以及参数

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

    • 注册：这里的注册没有使用输入框数据,直接通过代码发送的
    <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>

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

    <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插件

  • 作用：快速收集表单元素的值
<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>
学习使我快乐01
关注
专栏目录
PHP判断axios请求类型,常用的三种请求方式ajax,axios,fetch
weixin_39619170的博客
03-12 578
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库(_或JavaScript框架_)。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。作...
(基础)AJAX概念和axios使用、URL、请求方法和数据提交、HTTP协议、接口、form-serialize插件
m0_51195865的博客
03-17 1317
AJAX就是使用XMLHttpRequest对象与服务器通信，它可以使用JSON、XML、HTML和text文本等格式发送和接收数据，AJAX最吸引人的就是它的异步特性，也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面。
ajax-axios-url-form-serialize 插件
格式化小拓
08-19 2761
1.什么是 AJAX?使用浏览器的对象 与服务器通信浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页2.什么是服务器？
axios（URL+http报文+form-serialize插件的使用）
qq_50260510的博客
04-15 726
axios（URL+http报文+form-serialize插件的使用）
AJAX 入门 day1 ajax介绍、axios使用、URL、请求方法、数据提交、HTTP协议-报文
2301_77358195的博客
09-15 916
1.AJAX 概念和 axios 使用“Ajax” 是 “Asynchronous(异步) JavaScript and XML” 的缩写，是一种用于创建动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器进行交互和更新内容，从而提高用户体验和页面的响应速度。怎么用 AJAX？1.先使用axios[æk‘sioʊs]库，与服务器进行数据通信基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次Vue、React 项目中都会用到 axios2.
AJAX Day01axios的使用,url,查询参数,请求方法,数据提交,axios错误处理,请求报文,响应报文,接口文档,登录案例,form-serialize插件
weixin_52284271的博客
09-14 108
AJAX Day01axios的使用,url,查询参数,请求方法,数据提交,axios错误处理,请求报文,响应报文,接口文档,登录案例,form-serialize插件
AJAX --- 1 认识URL form-serialize插件
love33441314520的博客
08-15 1345
AJAX是异步的 JavaScript 和XML。简单来说就是使用XMLHttpRequest 对象与服务器通信。他可以使用JSON、XML、HTML和text文本等格式发送和接收数据。
AJAX-URL/HTTP/form-serialize 插件
2301_76866366的博客
04-09 82
ajax概念 语法 url同意资源定位符 url查询参数 请求方法 axios错误处理 http协议报文 请求报文 响应报文 接口文档
form-serialize插件
qq_54800157的博客
08-02 1067
form-serialize插件
前端-JavaScript-ajax (axios、 promise、git...)
11-19
ajax--ajax原生写法。...具体：请求与相应、浏览器和服务器、接口、回调函数、事件循环、宏任务与微任务、form表单提交、serialize插件、JSON、async，await、git仓库基础命令、远程仓库SSH、VScode上的git操作
Ajax复习02-(form 表单,axios 拦截器,FormData文件上传)
m0_64526818的博客
01-17 1350
form 表单,axios 拦截器,FormData文件上传
form-serialize.js
07-28
form-serialize.js是一个用于序列化表单域以通过ajax提交表单的插件。它可以将表单数据转换为一个JavaScript对象，方便在ajax请求中使用。通过使用该插件，可以在表单提交时获取表单数据，并将其发送到服务器。\[1\]...
index.html 调用 ajax
flamesfather的博客
10-01 804
index.html 调用 ajax
【漏洞复现】孚盟云oa AjaxSendDingdingMessage接口 存在sql注入漏洞
qq_48368964的博客
09-28 1091
孚盟与阿里强强联手将最受青睐的经典C系列产品打造成全新的孚盟云产品，让用户可以用云模式实现信息化管理，让用户的异地办公更加流畅，大大降低中小企业在信息化上成本，用最小的投入享受大型企业级别的信息化服务，使中小企业在网络硬件环境、内部贸易过程管理与快速通关形成一套完整解决方案。Web程序中对于用户提交的参数未做过滤直接拼接到SQL语句中执行，导致参数中的特殊字符破坏了SQL语句原有逻辑，攻击者可以利用该漏洞执行任意SQL语句，如查询数据、下载数据、写入webshell、执行系统命令以及绕过登录限制等。
Ajax开发技术
Liuxu 的博客
09-29 758
【代码】Ajax开发技术。
AJAX(简介以及一些用法)
m0_63233901的博客
09-24 991
对象和服务器进行数据交互的方式就是。，它可以帮助我们轻松实现网页与服。）我们可以理解为：在网页中。务器之间的数据交互。
Ajax （ 是什么、URL、axios、HTTP、快速收集表单 ）Day01
最新发布
m0_74154295的博客
10-01 1172
- **同步**：适合那些必须按顺序执行，不能并行的任务，例如需要读取文件的每一行并按顺序处理。 - **异步**：适合那些可以并行处理的任务，尤其是需要等待外部资源的操作，比如网络请求、数据库访问等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学习使我快乐01

您的支持，是我前行的动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值