首页 > 其他分享 >前端发送Ajax请求的技术Axios

前端发送Ajax请求的技术Axios

时间:2025-01-19 14:03:59浏览次数:3  
标签:axios 请求 get 前端 发送 Ajax Axios post

目录

1.引入Axios文件

2.使用Axios发送请求

2.1请求方法的别名

请求的URL地址怎么来的?

后端实现

前后端交互


1.引入Axios文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.使用Axios发送请求

2.1请求方法的别名

方法描述
axios.get(url [, config])发送get请求
axios.delete(url [, config])发送delete请求
axios.post(url [, data[, config]])发送post请求
axios.put(url [, data[, config]])发送put请求

 get请求:

axios.get("https://mock.apifox.cn/m1/3083103-0-default/emps/list").then(result => {
    console.log(result.data);
})

post请求:

axios.post("https://mock.apifox.cn/m1/3083103-0-default/emps/update","id=1").then(result => {
    console.log(result.data);
})

所有请求发出后不会立即执行then后面的代码,而是等服务器响应回来后执行。

请求的URL地址怎么来的?

是后端开发人员定义的API接口地址。

后端实现

后端开发人员会基于特定的技术栈(比如java,Node js,Python等)构建服务器

并在服务器上编写处理各种HTTP请求(GET,POST的)的代码逻辑。

当服务器收到GET||post请求时,调用相应的处理函数响应

前后端交互

前端通过Axios或其他HTTP客户端发送请求与到URL,并附带必要额查询参数(如姓名,性别,职位)。

服务端收到请求后就,解析这些参数,执行相应的数据库查询操作,最后将结果打包成JSON格式返回给前端。

标签:axios,请求,get,前端,发送,Ajax,Axios,post
From: https://blog.csdn.net/2303_79136949/article/details/145242080

相关文章

  • 在 Vue 3 中实现插件化架构:设计可扩展的前端插件系统
    随着前端项目的复杂性不断提升,模块化和可扩展性在架构设计中的重要性愈加突出。Vue3的CompositionAPI和插件机制为我们实现插件化架构提供了便利。本文将深入探讨如何在Vue3中构建一个高效、灵活的插件系统,为大型前端项目的扩展性打下基础。为什么选择插件化架构?插件......
  • 前端必知必会-Node.js连接MongoDB 创建集合
    文章目录Node.js连接MongoDB创建集合创建集合总结Node.js连接MongoDB创建集合MongoDB中的集合与MySQL中的表相同创建集合要在MongoDB中创建集合,请使用createCollection()方法:示例获取您自己的Node.js服务器创建一个名为“customers”的集合:varMon......
  • 前端必知必会-Node.js连接MongoDB 删除集合
    文章目录Node.js连接MongoDB删除集合删除集合db.dropCollection总结Node.js连接MongoDB删除集合删除集合您可以使用drop()方法删除表或MongoDB中所谓的集合。drop()方法采用包含错误对象和结果参数的回调函数,如果成功删除集合,则返回true,否则返回false。......
  • 前端——Html+CSS
    目录CSS引入方式颜色表达方式CSS选择器去掉超链接的下划线路径表示行高和首行缩进常见标签布局标签flex布局表单标签表单项标签 改变鼠标指针的样式表格标签div{box-sizing:border-box;}CSS引入方式具体有3种引入方式,语法如下表格所示:名称语法描述示例......
  • 前端小案例——网页井字棋
        前言:我们在学习完了HTML、CSS和JavaScript之后,就会想着使用这三个东西去做一些小案例,不过又没有什么好的案例让我们去练手,本篇文章就提供里一个案例——网页井字棋。✨✨✨这里是秋刀鱼不做梦的BLOG✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN......
  • 黑马前端学习笔记(1)HTML5篇
    第一天目录第一天1、HTML定义2、标签语法3、HTML基本骨架4、标签的关系5、注释6、排版标签①标题标签②段落标签③换行和水平线标签④文本格式化标签7、图像标签①基本使用②属性8、路径①相对路径-从当前文件位置出发查找目标文件②绝对路径-从盘符出发查找......
  • 一文了解前端最常用7种布局方式
    一 弹性布局(Flexbox)--比较常用的布局方式示例:<!DOCTYPEhtml><htmllang="en"><head><style>.container{display:flex;justify-content:space-between;/*主轴上的元素均匀分布*/align-items:cente......
  • 打包前端项目时报错:Task function must be specified
    注意:以下示例是你前端环境安装好的情况下排查的问题,前端环境没安装好请自行安装好报错示例:输入命令: gulp-v查看全局gulp和本地项目的gulp版本  这里可以看出这两个版本不一致,这时我们需要在项目里去修改一下对应的版本,改成3.0.0(这里根据自己的需求更改就好)重新运行......
  • 使用Axios实现表格数据动态加载与转换
    在现代的Web开发中,前后端分离架构越来越普遍。前端页面通过Ajax请求从后端获取数据并进行展示是一种常见的需求。本文将通过一个简单的示例,介绍如何使用Vue.js结合ElementUI以及Axios库,实现表格数据的动态加载与转换。一、项目背景在开发一个会员管理系统时,我们需要在前端页......
  • 多监控m3u8视频流,怎么获取每个监控的封面图(纯前端)
    文章目录1.背景2.问题分析3.解决方案3.1解决思路3.2解决过程3.2.1封装播放组件3.2.2隐形的视频div3.2.3截取封面图3.3结束1.背景有这样一个需求:给你一个监控列表,每页展示多个监控(至少12个,m3u8格式);且展示每个监控的第一帧画面的封面图,但是后端没给你返回封面图......