AJAX Day01axios的使用,url,查询参数,请求方法,数据提交,axios错误处理,请求报文,响应报文,接口文档,登录案例,form-serialize插件

已于 2023-09-15 08:41:14 修改
阅读量78 收藏 1
点赞数
分类专栏： AJAX学习记录 文章标签： ajax 前端
于 2023-09-14 20:42:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52284271/article/details/132869603
版权

axios的使用：

axios库地址: https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
在这里插入图片描述

  1. AJAX 有什么用？
    ➢ 浏览器和服务器之间通信，动态数据交互
  2. AJAX 如何学：
    ➢ 先掌握 axios 使用
    ➢ 再了解 XMLHttpRequest 原理

URL 就是统一资源定位符，简称网址，用于访问网络上的资源
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
AJAX 阶段接口文档:https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8/api-87683400
在这里插入图片描述

在这里插入图片描述
登录案例

<!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>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：使用提示框，反馈提示消息


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

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

      // 2.实现细节
      myAlert.innerText = msg
      const bgstyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgstyle)

      // 3.过2秒隐藏
      setTimeout(() => {
        myAlert.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) {
        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>
</body>

</html>

  // hash 设置获取数据结构
  //     -true  ：JS对象（推荐） 一般请求体里提交给服务器
  //     -false :查询字符串
  //    empty 设置是否设置空置
  //       -true设置空值（推荐） 数据结构和标签结构一致
  //       -false 不获取空值

在这里插入图片描述
在这里插入图片描述

登陆案例（serialize插件）

<!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>14.案例_登录_插件使用</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 class="login-form">
        <div class="mb-3">
          <label for="username" class="form-label">账号名</label>
          <input type="text" class="form-control username" name="username">
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control password" name="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 src="./lib/form-serialize.js"></script>
  <script>
    // 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
    // 目标2：使用提示框，反馈提示消息
    // 目标3：使用form-serialize插件，收集用户名和密码

    // 2.1 获取提示框
    const myAlert = document.querySelector('.alert')
    /**2.2 封装提示框函数，重复调用，满足提示需求
     * 功能：
     * 1. 显示提示框
     * 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
     * 3. 过2秒后，让提示框自动消失
    */
    function alertFn(msg, isSuccess) {
      // 1> 显示提示框
      myAlert.classList.add('show')

      // 2> 实现细节
      myAlert.innerText = msg
      const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
      myAlert.classList.add(bgStyle)

      // 3> 过2秒隐藏
      setTimeout(() => {
        myAlert.classList.remove('show')
        // 提示：避免类名冲突，重置背景色
        myAlert.classList.remove(bgStyle)
      }, 2000)
    }

    // 1.1 登录-点击事件
    document.querySelector('.btn-login').addEventListener('click', () => {
      // 使用serialize函数，收集登录表单中的用户名和密码
      const form = document.querySelector('.login-form')
      const data = serialize(form, { hash: true, empty: true })
      console.log(data)
      // {username: "itheima007", password: "7654321"}
      const { username, password } = data   //数组解构
      // 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>
</body>

</html>
瑜 ～
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
5、黑马头条-数据管理平台 DAY5
m0_51394252的博客
07-26 425
黑马头条-数据管理平台，是什么样网站，要完成哪些功能？✓ 数据管理网站，登录后对数据进行增删改查数据管理平台，未登录能否管理数据？✓ 不能，数据是公司内部的，需账号登录后管理为什么要按照一定的结构，管理代码文件？✓ 方便以后的查找和扩展if(!token) {/*** 目标2：设置个人信息* 2.1 在 utils/request.js 设置请求拦截器，统一携带 token* 2.2 请求个人信息并设置到页面*/// 2.2 请求个人信息并设置到页面axios({})
http :请求响应报文-web服务-ajax-cors跨域
weixin_57218747的博客
05-15 502
node：http 协议:请求响应报文-web服务-url与对象的转化-ajax-cors跨域 1 梳理重点 1.1搭建服务 注意： ① 站点创建完成后，需要通过node命令启动 ② 创建站点的代码如果发生变化，需要重启服务 ③ 当用户输入域名：端口号/a/b,会请求到createServer接收的回调函数，回调函数需要给予响应，如果没有响应那么会一直请求下去 ④ response.end():end 传入的信息全部在该对象内 const http = require("http");// 内置模块 con
Vue ElementUI Axios 前后端案例(day03) 之 Axios
lpblog的博客
04-20 535
我们是否可以这么理解，发送url请求就是服务器之间建立连接，tcp三次握手之后 其中与服务器进行数据交换：通过AJAX可以给服务器发送请求 就是连接建立以后 我们发送我们的浏览器数据 就是所谓的发送url请求。那也就是说ajax 只帮助我们收集了客户端的数据并发送到客户端的通信组件，至于服务器通信组件和客户端通信组件如何建立连接和传输数据的过程，我们程序员并不需要关心是吗？在 AJAX 技术中，我们不仅可以发送 URL 请求，还可以发送其他类型的请求，比如 JSON、XML 等格式的数据。
Spring复习——day14_SpringMVC_处理ajax请求
qq_46061535的博客
10-25 100
3、使用@ResponseBody注解标识控制器方法，在方法中，将需要转换为json字符串并响应到浏览器的java对象作为控制器方法的返回值，此时SpringMVC就可以将此对象直接转换为json字符串并响应到浏览器。@RequestBody可以获取请求体信息，使用@RequestBody注解标识控制器方法的形参，当前请求的请求体就会为当前注解所标识的形参赋值。3、在控制器方法的形参位置，设置json格式的请求参数要转换成的java类型（实体类或map）的参 数，并使用@RequestBody注解标识。
day30 Ajax 1
m0_70619994的博客
08-15 233
一、服务器相关的基础概念 1、客户端 2、服务器 3、客户端与服务器通信的过程 4、资源与 URL 地址 二、Ajax 1、什么是 Ajax 2、使用 Ajax 请求数据的 5 种方式 3、axios 三、请求报文 & 响应报文 1、什么是请求报文和响应报文 2、请求报文的格式 3、响应报文的格式 4、http 响应状态码 四、接口相关的基础概念 1、接口的概念 2、接口文档的概念 3、接口测试工具-Postman......
1.AJAX 入门 DAY1 让数据活起来
m0_51394252的博客
07-21 100
（「艾科C藕丝」）引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js使用 axios 函数✓ 传入配置对象✓ 再用.then回调函数接收结果，并做后续处理AJAX 有什么用？➢ 浏览器和服务器之间通信，动态数据交互AJAX 如何学：➢ 先掌握 axios 使用➢ 再了解 XMLHttpRequest 原理这一节 axios 体验步骤？➢ 引入 axios 库➢ 使用 axios 语法。
JavaWeb【总结】——（请求和响应）浏览器发送请求的方式 & 服务器响应的方式
Arya的博客，专注后端领域
06-15 1954
javaweb开发相关背景知识； 浏览器请求和服务器响应方式总结； 同步和异步的登录注册，分页显示，增删改查案例；
AJAX-day1：
2303_79590957的博客
07-05 1147
AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活。
AJAX 入门-day1
tang好好学习
06-18 930
2. 使用serialize函数，快速收集表单元素的值。* 建议name属性的值，最好和接口文档参数名一致。注意：axios 在运行时把参数名和值，会拼接到 url。需求：请求目标资源地址，拿到省份列表数据，显示到页面。* 表单元素设置name属性，值会作为。HTTP 协议：规定了浏览器发送及服务器返回内容的。HTTP 协议：规定了浏览器发送及服务器返回内容的。* - false：不获取空值。* 参数1：要获取哪个表单的数据。场景：再次注册相同的账号，会遇到报错信息。
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
在开发Vue项目中，与后端进行数据交互是常见的需求，通常我们会使用axios库来发起HTTP请求。然而，有时候在用户登录后，我们希望在后续的请求中携带cookie以实现身份验证。本篇文章将详细解释如何在Vue项目中配置...
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
下面将详细介绍在 Vue 组件化中利用 Axios 处理 Ajax 请求的使用方法。 Axios 的基本使用 首先，在使用 Axios 之前，需要在 main.js 文件中引入 Axios： ```javascript import axios from 'axios' ``` 将 Axios ...
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
10-16
总结来说，处理Vue中axios连续请求导致的返回数据混乱问题，可以采取与后端优化接口、使用Promise.all来控制请求顺序以及利用axios的CancelToken来取消不必要的请求。通过这些方法，我们可以有效地维护数据的一致性...
vue axios数据请求及vue中使用axios的方法
10-18
Vue 和 Axios 结合使用，能够方便地在 Vue 应用中处理数据获取和发送。以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍： 1. **Axios 的基本介绍** Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器...
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Ajax学习笔记
2301_79614379的博客
07-21 1045
定义：asyn和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。概念：在async函数内，使用await关键字取代then函数，等待获取Promise对象成功状态的结果值。定义：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环。axios响应拦截器：响应回到then/catch之前，触发的拦截函数，对响应的结果统一处理。Promise本身是同步的，而then和catch回调函数是异步的。
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 467
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 79
【代码】TS如何处理js模块的类型？
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 990
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
axios接口怎么让参数从请求头放到url链接上
07-14
在使用 Axios 发送请求时，你可以通过配置参数将参数从请求头放到 URL 链接上。以下是一个示例： ```javascript import axios from 'axios'; const apiUrl = 'https://example.com/api'; const headers = { '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值