前端(三):Ajax
一、Ajax
Asynchronous JavaScript And XML,简称Ajax,是异步的JavaScript和XML。
作用:数据交换,通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术,如:搜索联想、用户名是否可用的校验等。
(一)原生Ajax请求
1、创建XMLHttpRequest对象:用于和服务器交换数据
2、向服务器发送请求
3、获取服务器响应数据

(二)Axios
对原生Ajax的封装,简化书写,快速开发。
官网:https://www.axios-http.cn/

实例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../JS/axios.min.js"></script><script src="../JS/vue.js"></script>
</head>
<body><input type="button" value="获取数据get" onclick="get()"><input type="button" value="删除数据post" onclick="post()">
</body>
<script>function get(){axios({/* 通过get发送异步请求 */method:"get",url:"https://yapi.pro/mock/478286/userGetByID"}).then((result) => {console.log(result);})function post(){axios({/* 通过post发送异步请求 */method:"post",url:"http://yapi.smart-xwork.cn/mock/478286/deleteById",data:"id = 1"}).then((result) => {console.log(result);})}
</script>
</html>
请求方式别名:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../JS/axios.min.js"></script><script src="../JS/vue.js"></script>
</head>
<body><input type="button" value="获取数据get" onclick="get()"><input type="button" value="删除数据post" onclick="post()">
</body>
<script>function get(){// axios({// /* 通过get发送异步请求 */// method:"get",// url:"https://yapi.pro/mock/478286/userGetByID"// }).then((result) => {// console.log(result.data);// })axios.get("https://yapi.pro/mock/478286/userGetByID").then(result =>{console.log(result);})}function post(){//axios({// /* 通过post发送异步请求 */// method:"post",// url:"http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",// data:"id = 1"// }).then((result) => {// console.log(result.data);// })axios.post("https://yapi.pro/mock/478286/deleteByID","id=1").then(result =>{console.log(result);})}
</script>
</html>
结果(在Yapi中设置了端口才可以连接!,详情请看:):

相关文章:
前端(三):Ajax
一、Ajax Asynchronous JavaScript And XML,简称Ajax,是异步的JavaScript和XML。 作用:数据交换,通过Ajax可以给服务器发送请求,并获取服务器响应的数据。异步交互:可以在不重新加载整个页面的情况下&…...
启动 /使用/关闭 Redis 服务器
1. Linux 启动 Linux 系统启动 Redis 有两种方法,分别是前台启动,后台启动,两者各有差异; (1)前台启动 首先,需要进入 bin 路径(安装路径不同输入的命令也不同); 个人的命令(一般…...
Linux系统中的高级SELinux安全策略定制技术
随着信息技术的发展,计算机系统的安全性变得越来越重要。在开源世界中,Linux作为一种广泛应用的操作系统,其安全性一直备受关注。其中,SELinux(Security-Enhanced Linux)作为Linux系统中的一个安全模块&…...
使用 Ansible Blocks 进行错误处理
注:机翻,未校。 How to Use Ansible Blocks Make your Playbooks more readable and maintainable using Blocks feature in Ansible. 使用 Ansible 中的块功能使 Playbook 更具可读性和可维护性。 Jul 15, 2024 — LHB Community How to Use Ansible…...
java中的静态变量和实例变量的区别
java中的静态变量和实例变量的区别 在Java中,静态变量(也称为类变量)和实例变量是两种不同类型的变量,它们在多个方面存在显著的区别。以下是它们之间的一些主要区别: 存储位置 静态变量:存储在方法区&am…...
【Effecutive C++】条款02 尽量以const, enum, inline替换 #define
Prefer consts, enums, and inline to #define. 这个条款或许改为“宁可以编译器替换预处理器”比较好,因为或许#define不被视为语言的一部分。那正是它的问题所在。当你做出这样的事情: #define ASPECT_RATIO 1.653记号名称ASPECT_RATIO也许从未被编译…...
leetcode-226. 翻转二叉树
题目描述 给你一棵二叉树的根节点 root ,翻转这棵二叉树,并返回其根节点。 示例 1: 输入:root [4,2,7,1,3,6,9] 输出:[4,7,2,9,6,3,1]示例 2: 输入:root [2,1,3] 输出:[2,3,1]…...
用的到linux-tomcat端口占用排查-Day5
前言: 最近使用tomcat搭建了一套测试环境的应用,整个搭建过程也很简单,就是将部署包上传至服务器☞解压☞启动tomcat服务器,当然服务器也是成功启动了,但是发现前端应用报404,具体如下图所示。 一、现象及思…...
mqtt协议详解(0)初步认识mqtt
文章目录 1. 介绍2. 主要特性3. 架构1. 介绍 MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议)是一种构建在TCP/IP协议之上的轻量级、基于发布-订阅模式的消息传输协议,适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境,例如IOT。 MQTT 协议于 1…...
Java语言程序设计基础篇_编程练习题*16.7 (设置时钟的时间)
*16.7 (设置时钟的时间) 编写一个程序,显示一个时钟,并通过在三个文本域中输入小时、分钟和秒 钟来设置时钟的时间,如图16-38b 所示。使用程序清单14-21的ClockPane改变时钟大小使其居于面板中央 习题思路 实例化一个ClockPane(在程序清单1…...
YOLOv8新版本支持实时检测Transformer(RT-DETR)、SAM分割一切
原文:YOLOv8新版本支持实时检测Transformer(RT-DETR)、SAM分割一切 - 知乎 (zhihu.com) 一、SAM 分割任何模型 (Segment Anything Model - SAM) 是一种突破性的图像分割模型,可实现具有实时性能的快速分割。 项目地址 https://github.com/facebookresearch/segment-…...
【传输层协议】UDP和TCP协议
文章目录 UDP协议UDP特点UDP的缓冲区基于UDP的应用层协议 TCP协议6位标志位:确认应答机制超时重传机制连接管理机制(握手和挥手)服务端状态转换过程客户端状态转换过程TIME_WAIT状态CLOSE_WAIT状态 为什么是三次握手和四次挥手滑动窗口如果发…...
Java Excel复杂表头,表头合并单元格
Java Excel复杂表头,表头合并单元格 效果预览 一、maven依赖 <!--操作excel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version><scope>test</…...
Java整合腾讯云发送短信实战Demo
简介 在现代应用开发中,短信服务是非常重要的功能之一。它可以用于用户验证、通知等各种场景。本文将介绍如何使用Java整合腾讯云短信服务,并提供一个完整的实战示例代码。 环境准备 在开始之前,确保你已经完成以下准备工作: 注…...
电路中电阻,电容和电感作用总结
电阻作用 1,上拉电阻 电阻的连接一般是一端接上拉的电源(一般与芯片信号的电压值相匹配),另一端连接芯片引脚所对应的信号大概如下图 功能:一、预置某些引脚的功能,例如复位信号拉高(失能&…...
OrangePi AIpro学习1 —— 烧写和ssh系统
目录 一、下载烧写工具和系统 二、烧写和启动 2.1 烧写和启动 2.2 烧写失败后的问题解决 三、串口连接到主机 3.1 串口连接到主机 四、网络连接到主机 4.1 修改香橙派IP地址 4.2 win11配置以太网静态ip 4.4 主机和香橙派直连 4.5 主机和香橙派连接到同一个路由器 五…...
Gather 全球化进程迅速 多重利好推动未来发展
在过去的几周里,Gather的全球化发展十分迅速,并取得了一系列重要成绩,这些成绩进一步巩固了Gather在区块链和去中心化通信领域的地位,并为未来的发展注入了强劲的动力。 $GAT代币成功进驻多家顶级交易所 7月19日,Gath…...
面试经典 222. 完全二叉树的节点个数
二叉树我最近刷的特别多,差不多快刷完了,但是有一种题型差点给我忽略了,那就是完全二叉树,这也是一个很重要的题型,今天刚好有一道题目可以来复习一下完全二叉树的特性 题目链接如下:https://leetcode.cn/…...
【css】3d柱状图-vue组件版
创建一个响应式圆柱形进度条组件 在现代网页设计中,圆柱形进度条是一种非常流行的视觉元素,用于展示数据的进度或状态。本文将介绍如何使用Vue.js和LESS创建一个响应式的圆柱形进度条组件。 组件结构 我们的组件由两部分组成:一个圆柱形的…...
《计算机组成原理》(第3版)第3章 系统总线 复习笔记
第3章 系统总线 一、总线的基本概念 总线是连接多个部件的信息传输线,是各部件共享的传输介质,如图3-1所示。 图3-1 面向CPU的双总线结构框图 倘若将CPU、主存和I/O设备都挂到一组总线上,便形成单总线结构的计算机,如图3-2所示…...
高压输电线路智能监测系统设计与实现
1. 项目背景与需求分析高压输电线路作为电力系统的"大动脉",其稳定运行直接关系到整个电网的安全。我在电力行业工作多年,亲眼见过多次因间隔棒故障导致的线路跳闸事故。传统的人工巡检方式存在明显短板:巡检周期长(通常…...
DVWA——SQL Injection学习笔记
文章目录前言一、是什么?二、步骤1.Low2.Medium3.High4.Impossible代码核心功能安全特性总结总结手工注入:前言 一、是什么? 二、步骤 1.Low 代码如下: <?phpif( isset( $_REQUEST[ Submit ] ) ) {// Get input$id $_REQU…...
1990~2024年各省市区区县水稻种植面积面板数据
各省市区县区县水稻种植面积面板数据1990~2024 数据文件包含如下: 1990~2024年各城市水稻种植面积面板数据.dta 1990~2024年各区县水稻种植面积面板数据.dta 1990~2024年各省份水稻种植面积面板数据.dta 除了省市…...
Beyond Compare 5 许可证书生成与应用完全指南
Beyond Compare 5 许可证书生成与应用完全指南 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 一、问题剖析:许可管理核心挑战 1.1 评估期限制的实际影响 Beyond Compare 5作为专业…...
Shell应用手册(一) 4.常见Shell版本(bash、zsh、sh,运维主流bash详解)
在Linux/Unix系统中,Shell是用户与内核交互的桥梁,是执行命令、编写脚本的核心工具。对于运维工程师而言,熟练掌握Shell版本的特性与使用方法,是提升工作效率、实现自动化运维的基础。本文将先梳理最常见的3种Shell版本࿰…...
联合注入及布尔型盲注基础流程(手注sqli-labs-master)
SQL 注入的核心原理:一句话概括 攻击者通过在输入框或 URL 参数中,输入恶意的 SQL 代码,让数据库“误以为”这是正常的指令并执行,从而泄露数据。 联合注入(UNION-based Injection) 联合注入是 SQL 注入中最常见、也最容易理解…...
从付费软件到自主开发:我用AI和FFmpeg实现了一个录屏工具侨
我为什么会发出这个疑问呢?是因为我研究Web开发中的一个问题时,HTTP请求体在 Filter(过滤器)处被读取了之后,在 Controller(控制层)就读不到值了,使用 RequestBody 的时候。 无论是字…...
hyn/multi-tenant数据库管理最佳实践:分离策略、迁移与种子数据
hyn/multi-tenant数据库管理最佳实践:分离策略、迁移与种子数据 【免费下载链接】multi-tenant Run multiple websites using the same Laravel installation while keeping tenant specific data separated for fully independent multi-domain setups, previously…...
Pretext:值得关注的文本排版引擎关
一、语言特性:Java 26 与模式匹配进化 1.1 Java 26 语言级别支持 IDEA 2026.1 EAP 最引人注目的变化之一,就是新增 Java 26 语言级别支持。这意味着开发者可以提前体验和测试即将在 JDK 26 中正式发布的语言特性。 其中最重要的变化是对 JEP 530 的全面支…...
从安防到自动驾驶:红外-可见光融合技术落地避坑指南
从安防到自动驾驶:红外-可见光融合技术落地避坑指南 在智能安防和自动驾驶领域,夜间或恶劣天气条件下的视觉感知一直是技术难点。红外与可见光图像融合(IVIF)技术通过结合两种模态的优势——可见光的高分辨率纹理和红外成像的环境…...
