当前位置： 首页 > news >正文

前端（三）：Ajax

news 2026/4/9 1:41:51

一、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&#xff0c;简称Ajax&#xff0c;是异步的JavaScript和XML。 作用&#xff1a;数据交换&#xff0c;通过Ajax可以给服务器发送请求&#xff0c;并获取服务器响应的数据。异步交互&#xff1a;可以在不重新加载整个页面的情况下&…...

编程日记 2024/8/6 17:12:02

启动 /使用/关闭 Redis 服务器

1. Linux 启动 Linux 系统启动 Redis 有两种方法&#xff0c;分别是前台启动&#xff0c;后台启动&#xff0c;两者各有差异&#xff1b; &#xff08;1&#xff09;前台启动 首先&#xff0c;需要进入 bin 路径(安装路径不同输入的命令也不同); 个人的命令&#xff08;一般…...

编程日记 2024/8/6 17:10:00

Linux系统中的高级SELinux安全策略定制技术

随着信息技术的发展&#xff0c;计算机系统的安全性变得越来越重要。在开源世界中&#xff0c;Linux作为一种广泛应用的操作系统&#xff0c;其安全性一直备受关注。其中&#xff0c;SELinux&#xff08;Security-Enhanced Linux&#xff09;作为Linux系统中的一个安全模块&…...

编程日记 2024/8/6 17:07:57

使用 Ansible Blocks 进行错误处理

注&#xff1a;机翻&#xff0c;未校。 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…...

编程日记 2024/8/6 17:06:56

java中的静态变量和实例变量的区别

java中的静态变量和实例变量的区别 在Java中&#xff0c;静态变量&#xff08;也称为类变量&#xff09;和实例变量是两种不同类型的变量&#xff0c;它们在多个方面存在显著的区别。以下是它们之间的一些主要区别&#xff1a; 存储位置 静态变量&#xff1a;存储在方法区&am…...

编程日记 2024/8/6 17:03:52

【Effecutive C++】条款02 尽量以const, enum, inline替换 #define

Prefer consts, enums, and inline to #define. 这个条款或许改为“宁可以编译器替换预处理器”比较好&#xff0c;因为或许#define不被视为语言的一部分。那正是它的问题所在。当你做出这样的事情&#xff1a; #define ASPECT_RATIO 1.653记号名称ASPECT_RATIO也许从未被编译…...

编程日记 2024/8/6 17:02:51

leetcode-226. 翻转二叉树

题目描述 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&#xff1a; 输入&#xff1a;root [2,1,3] 输出&#xff1a;[2,3,1]…...

编程日记 2024/8/6 17:01:49

用的到linux-tomcat端口占用排查-Day5

前言&#xff1a; 最近使用tomcat搭建了一套测试环境的应用&#xff0c;整个搭建过程也很简单&#xff0c;就是将部署包上传至服务器☞解压☞启动tomcat服务器&#xff0c;当然服务器也是成功启动了&#xff0c;但是发现前端应用报404&#xff0c;具体如下图所示。 一、现象及思…...

编程日记 2024/8/6 17:00:47

mqtt协议详解（0）初步认识mqtt

文章目录 1. 介绍2. 主要特性3. 架构1. 介绍 MQTT（Message Queuing Telemetry Transport，消息队列遥测传输协议）是一种构建在TCP/IP协议之上的轻量级、基于发布-订阅模式的消息传输协议，适用于资源受限的设备和低带宽、高延迟或不稳定的网络环境，例如IOT。 MQTT 协议于 1…...

编程日记 2024/8/6 16:59:46

Java语言程序设计基础篇_编程练习题*16.7 (设置时钟的时间)

*16.7 (设置时钟的时间) 编写一个程序&#xff0c;显示一个时钟&#xff0c;并通过在三个文本域中输入小时、分钟和秒 钟来设置时钟的时间&#xff0c;如图16-38b 所示。使用程序清单14-21的ClockPane改变时钟大小使其居于面板中央 习题思路 实例化一个ClockPane(在程序清单1…...

编程日记 2024/8/6 16:55:41

YOLOv8新版本支持实时检测Transformer（RT-DETR）、SAM分割一切

原文：YOLOv8新版本支持实时检测Transformer（RT-DETR）、SAM分割一切 - 知乎 (zhihu.com) 一、SAM 分割任何模型 （Segment Anything Model - SAM） 是一种突破性的图像分割模型，可实现具有实时性能的快速分割。 项目地址 https://github.com/facebookresearch/segment-…...

编程日记 2024/8/6 16:54:40

【传输层协议】UDP和TCP协议

文章目录 UDP协议UDP特点UDP的缓冲区基于UDP的应用层协议 TCP协议6位标志位&#xff1a;确认应答机制超时重传机制连接管理机制&#xff08;握手和挥手&#xff09;服务端状态转换过程客户端状态转换过程TIME_WAIT状态CLOSE_WAIT状态 为什么是三次握手和四次挥手滑动窗口如果发…...

编程日记 2024/8/6 16:53:39

Java Excel复杂表头，表头合并单元格

Java Excel复杂表头&#xff0c;表头合并单元格 效果预览 一、maven依赖 <!--操作excel --><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.1.1</version><scope>test</…...

编程日记 2024/8/6 16:52:38

Java整合腾讯云发送短信实战Demo

简介 在现代应用开发中&#xff0c;短信服务是非常重要的功能之一。它可以用于用户验证、通知等各种场景。本文将介绍如何使用Java整合腾讯云短信服务&#xff0c;并提供一个完整的实战示例代码。 环境准备 在开始之前&#xff0c;确保你已经完成以下准备工作&#xff1a; 注…...

编程日记 2024/8/6 16:51:37

电路中电阻，电容和电感作用总结

电阻作用 1&#xff0c;上拉电阻 电阻的连接一般是一端接上拉的电源&#xff08;一般与芯片信号的电压值相匹配&#xff09;&#xff0c;另一端连接芯片引脚所对应的信号大概如下图 功能&#xff1a;一、预置某些引脚的功能&#xff0c;例如复位信号拉高&#xff08;失能&…...

编程日记 2024/8/6 16:50:35

OrangePi AIpro学习1 —— 烧写和ssh系统

目录 一、下载烧写工具和系统 二、烧写和启动 2.1 烧写和启动 2.2 烧写失败后的问题解决 三、串口连接到主机 3.1 串口连接到主机 四、网络连接到主机 4.1 修改香橙派IP地址 4.2 win11配置以太网静态ip 4.4 主机和香橙派直连 4.5 主机和香橙派连接到同一个路由器 五…...

编程日记 2024/8/6 16:47:32

Gather 全球化进程迅速 多重利好推动未来发展

在过去的几周里&#xff0c;Gather的全球化发展十分迅速&#xff0c;并取得了一系列重要成绩&#xff0c;这些成绩进一步巩固了Gather在区块链和去中心化通信领域的地位&#xff0c;并为未来的发展注入了强劲的动力。 $GAT代币成功进驻多家顶级交易所 7月19日&#xff0c;Gath…...

编程日记 2024/8/6 16:43:26

面试经典 222. 完全二叉树的节点个数

二叉树我最近刷的特别多&#xff0c;差不多快刷完了&#xff0c;但是有一种题型差点给我忽略了&#xff0c;那就是完全二叉树&#xff0c;这也是一个很重要的题型&#xff0c;今天刚好有一道题目可以来复习一下完全二叉树的特性 题目链接如下&#xff1a;https://leetcode.cn/…...

编程日记 2024/8/6 16:42:25

【css】3d柱状图-vue组件版

创建一个响应式圆柱形进度条组件 在现代网页设计中&#xff0c;圆柱形进度条是一种非常流行的视觉元素&#xff0c;用于展示数据的进度或状态。本文将介绍如何使用Vue.js和LESS创建一个响应式的圆柱形进度条组件。 组件结构 我们的组件由两部分组成&#xff1a;一个圆柱形的…...

编程日记 2024/8/6 16:41:24

《计算机组成原理》（第3版）第3章 系统总线 复习笔记

第3章　系统总线 一、总线的基本概念 总线是连接多个部件的信息传输线&#xff0c;是各部件共享的传输介质&#xff0c;如图3-1所示。 图3-1 面向CPU的双总线结构框图 倘若将CPU、主存和I/O设备都挂到一组总线上&#xff0c;便形成单总线结构的计算机&#xff0c;如图3-2所示…...

编程日记 2024/8/6 16:40:22

高压输电线路智能监测系统设计与实现

1. 项目背景与需求分析高压输电线路作为电力系统的"大动脉"&#xff0c;其稳定运行直接关系到整个电网的安全。我在电力行业工作多年&#xff0c;亲眼见过多次因间隔棒故障导致的线路跳闸事故。传统的人工巡检方式存在明显短板&#xff1a;巡检周期长&#xff08;通常…...

编程新知 2026/4/9 0:12:25

DVWA——SQL Injection学习笔记

文章目录前言一、是什么&#xff1f;二、步骤1.Low2.Medium3.High4.Impossible代码核心功能安全特性总结总结手工注入&#xff1a;前言 一、是什么&#xff1f; 二、步骤 1.Low 代码如下&#xff1a; <?phpif( isset( $_REQUEST[ Submit ] ) ) {// Get input$id $_REQU…...

编程新知 2026/4/8 23:40:07

1990～2024年各省市区区县水稻种植面积面板数据

各省市区县区县水稻种植面积面板数据1990&#xff5e;2024 数据文件包含如下&#xff1a; 1990&#xff5e;2024年各城市水稻种植面积面板数据.dta 1990&#xff5e;2024年各区县水稻种植面积面板数据.dta 1990&#xff5e;2024年各省份水稻种植面积面板数据.dta 除了省市…...

编程新知 2026/4/8 22:52:44

Beyond Compare 5 许可证书生成与应用完全指南

Beyond Compare 5 许可证书生成与应用完全指南 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 一、问题剖析&#xff1a;许可管理核心挑战 1.1 评估期限制的实际影响 Beyond Compare 5作为专业…...

编程新知 2026/4/8 22:16:03

Shell应用手册(一) 4.常见Shell版本（bash、zsh、sh，运维主流bash详解）

在Linux/Unix系统中&#xff0c;Shell是用户与内核交互的桥梁&#xff0c;是执行命令、编写脚本的核心工具。对于运维工程师而言&#xff0c;熟练掌握Shell版本的特性与使用方法&#xff0c;是提升工作效率、实现自动化运维的基础。本文将先梳理最常见的3种Shell版本&#xff0…...

编程新知 2026/4/8 22:03:46

联合注入及布尔型盲注基础流程（手注sqli-labs-master）

SQL 注入的核心原理&#xff1a;一句话概括 攻击者通过在输入框或 URL 参数中&#xff0c;输入恶意的 SQL 代码&#xff0c;让数据库“误以为”这是正常的指令并执行&#xff0c;从而泄露数据。 联合注入(UNION-based Injection) 联合注入是 SQL 注入中最常见、也最容易理解…...

编程新知 2026/4/8 21:35:24

从付费软件到自主开发：我用AI和FFmpeg实现了一个录屏工具侨

我为什么会发出这个疑问呢&#xff1f;是因为我研究Web开发中的一个问题时&#xff0c;HTTP请求体在 Filter&#xff08;过滤器&#xff09;处被读取了之后&#xff0c;在 Controller&#xff08;控制层&#xff09;就读不到值了&#xff0c;使用 RequestBody 的时候。 无论是字…...

编程新知 2026/4/8 19:07:14

hyn/multi-tenant数据库管理最佳实践：分离策略、迁移与种子数据

hyn/multi-tenant数据库管理最佳实践&#xff1a;分离策略、迁移与种子数据 【免费下载链接】multi-tenant Run multiple websites using the same Laravel installation while keeping tenant specific data separated for fully independent multi-domain setups, previously…...

编程新知 2026/4/8 18:02:27

Pretext：值得关注的文本排版引擎关

一、语言特性&#xff1a;Java 26 与模式匹配进化 1.1 Java 26 语言级别支持 IDEA 2026.1 EAP 最引人注目的变化之一&#xff0c;就是新增 Java 26 语言级别支持。这意味着开发者可以提前体验和测试即将在 JDK 26 中正式发布的语言特性。 其中最重要的变化是对 JEP 530 的全面支…...

编程新知 2026/4/8 17:49:49

从安防到自动驾驶：红外-可见光融合技术落地避坑指南

从安防到自动驾驶&#xff1a;红外-可见光融合技术落地避坑指南 在智能安防和自动驾驶领域&#xff0c;夜间或恶劣天气条件下的视觉感知一直是技术难点。红外与可见光图像融合&#xff08;IVIF&#xff09;技术通过结合两种模态的优势——可见光的高分辨率纹理和红外成像的环境…...

编程新知 2026/4/8 17:37:39