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

前端（三）：Ajax

news 2025/9/17 23:12: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

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

编程新知 2025/9/15 18:06:39

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

编程新知 2025/9/14 3:25:53

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/9/17 8:08:37

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/9/17 9:38:43

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/9/11 12:55:00

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/8/17 17:11:47

CMake 从 GitHub 下载第三方库并使用

有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...

编程新知 2025/9/2 19:31:47

基于matlab策略迭代和值迭代法的动态规划

经典的基于策略迭代和值迭代法的动态规划matlab代码&#xff0c;实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...

编程新知 2025/8/3 2:20:04