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

前端（三）：Ajax

news 2026/4/9 0:03:57

一、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

【医疗信息化开发者必修课】：C# FHIR SDK实战指南——从零构建符合HL7 FHIR R4规范的患者数据服务

第一章&#xff1a;FHIR标准与医疗信息化开发全景概览 FHIR&#xff08;Fast Healthcare Interoperability Resources&#xff09;是由HL7组织制定的现代医疗数据交换标准&#xff0c;旨在通过RESTful API、结构化资源和开放格式&#xff08;如JSON/XML&#xff09;弥合异构医疗…...

编程新知 2026/4/9 0:02:20

深度学习_YOLO，卡尔曼滤波和

1.YOLO 1.1 简介 YOLO系列算法是一类典型的one-stage目标检测算法&#xff0c;其利用anchor box将分类与目标定位的回归问题结合起来&#xff0c;从而做到了高效、灵活和泛化性能好&#xff0c;所以在工业界也十分受欢迎. Yolo算法采用一个单独的CNN模型实现end-to-end的目标检…...

编程新知 2026/4/8 23:56:19

数学建模算法案例精讲500篇-【自动驾驶】自动驾驶中的决策规划算法概述（代码篇第一篇：全局路径规划+行为决策）

目录 一、前言：代码篇核心定位与环境说明 1.1 运行环境说明 1.2 代码设计思路 二、A*算法代码实现（全局路径规划主流） 2.1 算法核心回顾（对应理论篇2.2节） 2.2 完整MATLAB代码实现 2.3 代码说明与调试技巧 2.3.1 代码结构对应理论 2.3.2 调试技巧（工程适配重点）…...

编程新知 2026/4/8 23:46:12

副业月入五万：软件测试从业者的知识变现全路径

引言&#xff1a;测试人的职业新机遇在AI重构技术生态的2026年&#xff0c;软件测试工程师正站在职业转型的黄金节点。行业数据显示&#xff0c;76%的资深测试人员通过副业实现收入倍增&#xff0c;其中15%的顶尖者突破月入五万门槛。本指南从专业视角拆解四大变现路径&#xf…...

编程新知 2026/4/8 23:05:15

NifSkope终极指南：为什么这款免费开源3D模型编辑器能彻底改变你的游戏模组制作体验

NifSkope终极指南&#xff1a;为什么这款免费开源3D模型编辑器能彻底改变你的游戏模组制作体验 【免费下载链接】nifskope A git repository for nifskope. 项目地址: https://gitcode.com/gh_mirrors/ni/nifskope 你是否曾为《上古卷轴》或《辐射》系列的模型文件格式头…...

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

低代码不是妥协，而是进化：.NET 9 AOT+Hot Reload双模引擎深度解析，上线周期压缩至72小时以内

第一章&#xff1a;低代码不是妥协&#xff0c;而是进化&#xff1a;.NET 9 AOTHot Reload双模引擎深度解析&#xff0c;上线周期压缩至72小时以内在传统认知中&#xff0c;“低代码”常被误读为牺牲可控性与性能的权宜之计。而.NET 9通过原生AOT编译与Hot Reload能力的深度融合…...

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

2026届必备的五大降重复率工具实测分析

Ai论文网站排名&#xff08;开题报告、文献综述、降aigc率、降重综合对比&#xff09; TOP1. 千笔AI TOP2. aipasspaper TOP3. 清北论文 TOP4. 豆包 TOP5. kimi TOP6. deepseek 人工智能论文工具正一步步重新塑造学术写作范式&#xff0c;当下主流平台整合自然语言处理和…...

编程新知 2026/4/8 21:47:33

旺店通与轻易云集成平台的无缝数据对接方案

数据源系统&#xff1a;旺店通企业奇门旺店通企业奇门是慧策旗下核心的智能零售解决方案&#xff0c;提供从订单管理到仓储物流的全链路服务。其特点包括&#xff1a;一体化智能零售平台&#xff0c;覆盖电商经营全流程打破数据孤岛&#xff0c;实现跨系统数据互通AI驱动的智能…...

编程新知 2026/4/8 20:46:57

深信服防火墙AF8.0实战配置指南：从零搭建安全防护体系

1. 初识深信服AF8.0防火墙 第一次接触深信服AF8.0防火墙时&#xff0c;我完全理解新手管理员面对这台设备时的茫然感。这台黑色机箱看起来就像个神秘盒子&#xff0c;但别担心&#xff0c;它其实是企业网络安全的"守门人"。AF8.0作为下一代防火墙&#xff0c;不仅能做…...

编程新知 2026/4/8 20:04:20

Le Git Graph 终极指南：GitHub提交图谱可视化工具快速上手

Le Git Graph 终极指南&#xff1a;GitHub提交图谱可视化工具快速上手 【免费下载链接】le-git-graph Browser extension to add git graph to GitHub website. 项目地址: https://gitcode.com/gh_mirrors/le/le-git-graph Le Git Graph 是一款功能强大的浏览器扩展&…...

编程新知 2026/4/8 19:11:17