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

【原生js案例】ajax的简易封装实现后端数据交互

news 来源：原创 2025/5/30 17:56:58

ajax是前端与后端数据库进行交互的最基础的工具，第三方的工具库比如jquery,axios都有对ajax进行第二次的封装，fecth是浏览器原生自带的功能，但是它与ajax还是有区别的，总结如下：

ajax与fetch对比

实现效果

请添加图片描述

代码实现

<!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/ajax.js"></script>
</head>
<body><form action="" method="POST"><input type="text" name="" id="userInput" /> <br><input type="text" name="" id="pwdInput" /> <br><input type="button" value="提交" id="btn"></form><div id="box"></div><script>window.onload = function(){const oBtn = document.querySelector('#btn');const oInput = document.querySelector('#userInput');const oPwd = document.querySelector('#pwdInput');const oBox = document.querySelector('#box');oBtn.onclick = function(){if(oInput.value == ''){alert('请输入内容');}else{http(`http://127.0.0.1:8080/api/user/form`,{name:oInput.value,pwd:oPwd.value},function(data){oBox.innerHTML = `Hello ${data.data.name},欢迎你 ${data.data.pwd}`;},"POST")}}}</script>
</body>
</html>

ajax封装

function http(url, data, cb, method = "GET") {const xhr = getXHR();console.log("🚀 ~ http ~ xhr:", xhr);xhr.open(method, url, true); // true为异步请求,false为同步请求xhr.onreadystatechange = function () {// 状态改变后执行此方法if (xhr.readyState === 4 && xhr.status === 200) {cb(JSON.parse(xhr.responseText)); // 字符创转成json}};xhr.setRequestHeader("Content-Type", "application/json");xhr.responseType = "application/json";xhr.send(method === "GET" ? null : JSON.stringify(data)); // 发送请求数据,GET方法不需要传递数据
}//兼容处理
function getXHR() {let xhr = null;if (window.XMLHttpRequest) {xhr = new XMLHttpRequest();} else {xhr = new ActiveXObject("Microsoft.XMLHTTP");}return xhr;
}

node实现的数据接口

配置了跨域及解析前端请求数据的中间件

const express = require("express");
const userRouter = require("./routes/user");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();// 允许跨域
app.use(cors());// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));// parse application/json
app.use(bodyParser.json());app.use("/api/user", userRouter);app.listen(8080, () => {console.log("Server is running on port 8080");
});

接口数据处理

const express = require("express");const router = express.Router();
// 模拟数据库，也可以介入mysql或者mongodb
const names = ["张三", "李四", "王五", "赵六"];router.get("/", (req, res) => {res.send("Hello World!");
});router.post("/form", (req, res) => {console.log("🚀 ~ router.post ~ req:", req.body);const { name, pwd } = req.body;if (names.includes(name)) {return res.json({code: 1,data: {name: "该用户名已经注册啦",pwd: "",},});} else {return res.json({code: 0,data: {name: `我是服务端返回的数据` + name,pwd: `我是服务端返回的数据` + pwd,},});}
});module.exports = router;

这样，我们就可以实现前后端的数据交互了。

【原生js案例】ajax的简易封装实现后端数据交互

ajax是前端与后端数据库进行交互的最基础的工具，第三方的工具库比如jquery,axios都有对ajax进行第二次的封装，fecth是浏览器原生自带的功能，但是它与ajax还是有区别的，总结如下： ajax与fetch对比实现效果代码实现 …...

编程日记 2025/5/30 17:56:58

uniapp Native.js 调用安卓arr原生service

有问题，文中的内容不正确最近搞了个uni小项目，一个定制的小平板，带一个nfc设备，厂家只给了一套安卓原生demo，头一次玩原生安卓，废了好半天劲打出来arr包，想镶进uniapp里，网上查了好…...

编程日记 2025/5/30 1:45:30

关于画火山图（by ggplot2）的一些总结和经验

愿武艺晴小朋友一定得每天都开心！文献中常用经典的火山图，是展示差异表达基因的利器。每次测完转录组，做实验组和对照组的比较后，都会用到。我自己也画了不算太多也不算太少的次数。然后最近画的时候忽然间意识到这个可视化方法我经常用，却没系统的整理过，一些tips散…...

编程日记 2025/5/26 21:42:47

组装一台电脑需要哪些硬件设备？点击了解

组装一台电脑是一个既有趣又实用的过程，我们可以根据自己的需求和预算来定制一台完全符合个人使用习惯的计算机。一、核心部件 1、中央处理器（CPU） CPU是计算机的“大脑”，负责执行各种计算任务。它的性能直接影响到计算机的运…...

编程日记 2025/5/28 18:04:07

Mac M1使用pip3安装报错

1. Mac系统使用pip3安装组件的时候报”外部管理环境”错误： error: externally-managed-environment 2.解决办法去掉这个提示 1、先查看当前python版本： python3 --version 2、查找EXTERNALLY-MANAGED 文件的位置（根据自己当前使用的pytho…...

编程日记 2025/5/28 4:29:07

在Linux系统安装配置 MySQL 和 hive，hive配置为远程模式

前提：已安装配置好了Hadoop环境，因为hive的底层是Hadoop 1 Mysql安装搜索Centos7自带的mariadb rpm -qa|grep mariadb 卸载mariadb rpm -e mariadb-libs-5.5.64-1.el7.x86_64 --nodeps 再搜索一次看看是否还存在 rpm -qa|grep mariadb 安装mysql 创…...

编程日记 2025/5/29 15:27:55

亚信安全与方天股份达成战略合作，双向奔赴助力数字化转型

近日，亚信安全科技股份有限公司（以下简称“亚信安全”）正式与青岛方天科技股份有限公司（以下简称“方天股份”）签订合作框架协议。双方强强携手，在网络安全运营平台共建、信息化项目安全支撑、政企市场拓展…...

编程日记 2025/5/29 23:36:27

ubuntu镜像开荒ssh

直接unminimized deprecated me ubuntu 安装 ssh，用 service 启动 4o 在 Ubuntu 上安装并启动 SSH 服务，你可以按照以下步骤进行操作： 更新软件包列表： 首先，确保你的软件包列表是最新的。打开终端并运行以下命令&…...

编程日记 2025/5/29 16:24:31

前端yarn工具打包时网络连接问题排查与解决

最近线上前端打包时提示 “There appears to be trouble with your network connection”，以此文档记录下排查过程。前端打包方式 docker启动临时容器打包，命令如下 docker run --rm -w /app -v pwd:/app alpine-node-common:v16.20-pro sh -c "…...

编程日记 2025/5/28 17:38:41

CCF-GESP 等级考试 C++ 真题解析目录

GESP C 一级序号日期真题解析链接12023.03CCF-GESP 等级考试 2023年3月认证C一级真题解析22023.06CCF-GESP 等级考试 2023年6月认证C一级真题解析32023.09[CCF-GESP 等级考试 2023年9月认证C一级真题解析]42023.12[CCF-GESP 等级考试 2023年12月认证C一级真题解析]52024.03[C…...

编程日记 2025/5/29 10:58:40

如何使用 WebAssembly 扩展后端应用

1. WebAssembly 简介随着互联网的发展，越来越多的应用借助 Javascript 转到了 Web 端，但人们也发现，随着移动互联网的兴起，需要把大量的应用迁移到手机端，随着手端的应用逻辑越来越复杂，Javascript 的解析…...

编程日记 2025/5/29 14:00:04

从DINO到DINOv2——自监督视觉Transformer的升级改进之路(基于ViT)

前言之所以关注到DINOV2，原因在于我解读多个具身机器人模型时——发现他们的视觉基座都用的DINOV2，比如 rekepOpen-TeleVisionOpenVLACogACTOKAMI 不过，实话讲，DINO论文的可读性是真的不高，使得本次解读不易..总之…...

编程日记 2025/5/29 19:26:14

CCF-GESP 等级考试 2024年12月认证C++七级真题解析

2024年12月真题一、单选题（每题2分，共30分） 正确答案：D 解析：考察字符类型和ASCII码值。字符类型参与运算，是它所对应的ASCII码值在参与运算，运算结果为整数值。小写字母 b 的ASCII码为98&am…...

编程日记 2025/5/28 7:03:35

Qt之串口设计-线程实现（十二）

Qt开发系列文章 - Serial-port（十二） 目录前言一、SerialPort 二、实现方式 1.创建类 2.相关功能函数 3.用户使用 4.效果演示 5.拓展应用-实时刷新总结前言 Qt作为一个跨平台的应用程序开发框架，在串口编程方面提供了方便易用…...

编程日记 2025/5/27 6:04:42

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕

20241217使用M6000显卡在WIN10下跑whisper来识别中英文字幕 2024/12/17 17:21 缘起，最近需要识别法国电影《地下铁》的法语字幕，使用字幕小工具V1.2【whisper套壳/GUI封装了】无效。那就是直接使用最原始的whisper来干了。当你重装WIN10的时候&#…...

编程日记 2025/5/28 7:18:29

基于 uniapp 开发 android 播放 webrtc 流

一、播放rtsp协议流如果 webrtc 流以 rtsp 协议返回，流地址如：rtsp://127.0.0.1:5115/session.mpg，uniapp的 <video> 编译到android上直接就能播放，但通常会有2-3秒的延迟。二、播放webrtc协议流如果 webrtc 流以 webrt…...

编程日记 2025/5/30 10:16:53

Java反射学习(3)(“反射“机制获取成员变量及详细信息（Field类）)

目录一、基本引言。 （1）基本内容回顾。 （2）本篇博客的核心内容-基本介绍。二、Java中使用"反射"机制获取成员变量及内部的详细信息。 （1）"反射"机制获取成员变量及详细信息的基本概念…...

编程日记 2025/5/29 15:54:12

Flutter组件————AppBar

AppBar 是 Flutter 中用于创建应用程序顶部栏的组件，它遵循 Material Design 规范。参数： 参数名称类型描述titleWidget设置 AppBar 中的标题文本或自定义标题小部件。automaticallyImplyLeadingbool决定是否自动添加返回按钮（如果页面不是…...

编程日记 2025/5/30 10:56:52

LabVIEW在电液比例控制与伺服控制中的应用

LabVIEW作为一种图形化编程环境，广泛应用于各类控制系统中，包括电液比例控制和伺服控制领域。在这些高精度、高动态要求的控制系统中，LabVIEW的优势尤为突出。以下从多个角度探讨其应用与优势： 1. 灵活的控制架构 LabVIEW为电…...

编程日记 2025/5/30 15:37:46

Jenkins

1.安装需要先安装jdk11 yum install -y java-11 yum localinstall -y jenkins-2.361.4-1.1.noarch.rpm 启动服务 systemctl enable --now jenkins.service 开始安装进入下一步，关掉即可下一步，点击开始使用Jenkins 2.插件的安装 1.方式一&…...

编程日记 2025/5/27 7:38:52

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导

Sigrity System Explorer Snip Via Pattern From Layout模式从其它设计中截取过孔模型和仿真分析操作指导 Sigrity System Explorer Snip Via Pattern From Layout模式支持从其它设计中截取过孔模型用于仿真分析，同样以差分模板为例具体操作如下双击打开System Explorer软件…...

编程日记 2025/5/30 12:42:53

Redux使用教程

Redux使用教程一、安装依赖安装ReduxToolkit、react-redux，命令行输入 npm i reduxjs/toolkit react-redux二、创建目录结构创建标准的store目录结构，当然这一步不是必须的 ① 在src下创建store文件夹 ② 在store文件夹中创建一个modules文…...

编程日记 2025/5/29 11:42:21

gpu硬件架构

1.简介 NVIDIA在视觉计算和人工智能（AI）领域处于领先地位；其旗舰GPU已成为解决包括高性能计算和人工智能在内的各个领域复杂计算挑战所不可或缺的。虽然它们的规格经常被讨论，但很难掌握各种组件的清晰完整的图景。这些GPU的高性…...

编程日记 2025/5/28 13:06:50

volatility2工具的使用vol2工具篇

vol2工具命令格式：vol.py -f [image] --profile[profile] [plugin] 1、查看系统的操作版本，系统镜像信息 2.查看用户名密码信息，当前操作系统中的password hash，例如SAM文件内容 3.从注册表提取LSA密钥信息（已解密&…...

编程日记 2025/5/28 16:02:58

LeetCode：104.二叉树的最大深度

跟着carl学算法，本系列博客仅做个人记录，建议大家都去看carl本人的博客，写的真的很好的！ 代码随想录 LeetCode：104.二叉树的最大深度给定一个二叉树 root ，返回其最大深度。二叉树的最大深度是指从根节…...

编程日记 2025/5/27 5:00:12

【游戏设计原理】19 - 得益

一、学习与分析核心概念总结： 得益（Payoff）：玩家在游戏中通过决策获得的产出，包括正面和负面。它可以以分数、等级、货币等形式体现。玩家差异：不同玩家追求不同类型的回报，有些人重视分数或…...

编程日记 2025/5/29 14:28:55

简单配置，全面保护：HZERO审计服务让安全触手可及

HZERO技术平台，凭借多年企业资源管理实施经验，深入理解企业痛点，为您提供了一套高效易用的审计解决方案。这套方案旨在帮助您轻松应对企业开发中的审计挑战，确保业务流程的合规性和透明度。接下来，我将为大家详细介绍…...

编程日记 2025/5/29 19:27:40

day5，数据结构，单向，双向，循环链表

1】思维导图 2】完成单向循环链表的所有操作【创建、判空、尾插、遍历、尾删、销毁】创建： LooplinkPtr caerte() {LooplinkPtr h(LooplinkPtr)malloc(sizeof(Looplink));if(NULLh){printf("创建失败\n");return NULL;}h->len0;h->data0;h->…...

编程日记 2025/5/26 14:15:28

构建高性能异步任务引擎：FastAPI + Celery + Redis

在现代应用开发中，异步任务处理是一个常见的需求。无论是数据处理、图像生成，还是复杂的计算任务，异步执行都能显著提升系统的响应速度和吞吐量。今天，我们将通过一个实际项目，探索如何使用 FastAPI、Celery 和 Redis …...

编程日记 2025/5/27 7:50:00

Linux 中检查 Apache Web Server (httpd) 正常运行时间的 4 种方法

注：机翻，未校。 4 Ways To Check Uptime of Apache Web Server (httpd) on Linux November 28, 2019 by Magesh Maruthamuthu We all know about the purpose of uptime command in Linux. 我们都知道 Linux 中 uptime 命令的目的。 It is used to c…...

编程日记 2025/5/28 2:07:04

简易CPU设计入门：内存初始化文件（三）

项目代码下载请大家首先准备好本项目所用的源代码。如果已经下载了，那就不用重复下载了。如果还没有下载，那么，请大家点击下方链接，来了解下载本项目的CPU源代码的方法。下载本项目代码准备好了项目源代码以后，我…...

编程日记 2025/5/29 11:25:53

深度解析Meta最新发布的虚拟试穿技术：一键试衣的革命性进展

随着电子商务的发展，消费者对在线购物体验的要求越来越高。为了满足这一需求，Meta最近发布了一款面向电商人群的一键试衣工具，它不仅能够实现精确控制人物的外观（虚拟试衣）和姿态（姿态迁移），还能保持参考图像中的细节纹理特征，避免失真。这项技术通过引入基于注意力机…...

编程日记 2025/5/29 13:01:48

Apache Solr RCE(CVE-2017-12629)--vulhub

Apache Solr 远程命令执行漏洞（CVE-2017-12629） Apache Solr 是一个开源的搜索服务器。Solr 使用 Java 语言开发，主要基于 HTTP 和 Apache Lucene 实现。原理大致是文档通过Http利用XML加到一个搜索集合中。查询该集合也是通过 http收到一个…...

编程日记 2025/5/29 22:51:36

使用二分查找法找出给定点距离给定点集合距离最近的点

1、场景描述给定点Point A （x,y）和直线点集合 Points [(x1,y1),(x2,y2),(x3,y3),(x4,y4),(x5,y5)......],计算出集合中距离点A最近的一个点 （如果集合中的两个点距离A点最近且相等，则只取其中一个） 2、代码&#x…...

编程日记 2025/5/29 11:14:21

凯酷全科技抖音电商服务的卓越践行者

在数字经济蓬勃发展的今天，电子商务已成为企业增长的新引擎。随着短视频平台的崛起，抖音作为全球领先的短视频社交平台，不仅改变了人们的娱乐方式，也为品牌和商家提供了全新的营销渠道。厦门凯酷全科技有限公司（以下简…...

编程日记 2025/5/29 6:14:45

复盘：“辩论赛”复盘

这个小活动整个下来，我是按照“策划-执行-总结-复盘“这个顺序来过的； 在策划上： 首先，针对这个论题，我其实很清楚有很多问题，比如引起逆反心理，没想到还有不少人参与。其次，针对这…...

编程日记 2025/5/25 20:16:04

SSD目标检测算法

SSD（Single Shot MultiBox Detector）是一种基于深度学习的目标检测算法，它结合了高效的检测策略和准确的检测结果。相比于传统的目标检测算法，SSD能够在保持较高准确性的同时快速地进行目标检测。 SSD算法的主要特点包括以下几个…...

编程日记 2025/5/29 20:58:52

MyBatis通过注解配置执行SQL语句原理源码分析

文章目录前置准备流程简要分析配置文件解析加载 Mapper 接口MapperAnnotationBuilder解析接口方法注解parseStatement 方法详解MapperBuilderAssistant 前置准备创建一个mybatis-config.xml文件，配置mapper接口 <mappers><mapper…...

编程日记 2025/5/24 19:28:04

12_HTML5 Video(视频) --[HTML5 API 学习之旅]

HTML5 引入了 <video> 标签，使得在网页中嵌入和控制视频变得非常简单。<video> 元素允许你直接在 HTML 中指定视频文件，并提供了多种属性和方法来控制视频的播放、暂停、音量等。基本用法 HTML5 的 <video> 标签让嵌入和控制视频变…...

编程日记 2025/5/30 16:57:25

JaxaFx学习（三）

目录： （1）JavaFx MVVM架构实现 （2）javaFX知识点 （3）JavaFx的MVC架构 （4）JavaFx事件处理机制 （5）多窗体编程 （6）数据…...

编程日记 2025/5/29 16:21:37

视频点播系统｜Java｜SSM｜VUE｜前后端分离

【技术栈】 1⃣️：架构: B/S、MVC 2⃣️：系统环境：Windowsh/Mac 3⃣️：开发环境：IDEA、JDK1.8、Maven、Mysql5.7 4⃣️：技术栈：Java、Mysql、SSM、Mybatis-Plus、VUE、jquery,html 5⃣️数据库可…...

编程日记 2025/5/29 21:33:46

Springboot 学习之 logback-spring.xml 日志压缩 .tmp 临时文件问题

文章目录前言功能简述1. 自定义日志文件名2. 归档规则 && 压缩2.1. 归档配置2.2. 归档压缩2.3. 日志格式 && 编码现象原因解决办法前言在 Springboot 应用中，默认使用 logback-spring.xml 配置日志相关功能简述 1. 自定义日志文件名 <fi…...

编程日记 2025/5/30 4:13:18

智慧工地整体解决方案

智慧工地背景与需求智慧工地解决方案的提出，源于建筑行业面临的诸多挑战。安全事故频发、环保体系不健全、建筑信息化水平低以及施工现场管理难度大等问题，迫切需要通过智能化手段来提升工地管理的效率与安全性。智慧工地利用现代信息技术&#xff0c…...

编程日记 2025/5/28 7:40:53

【读书打卡版】【读书笔记】半小时漫画中国地理3

一如果全中国是个班级，江南五省各不同继续跟随长江的脚步，认识坐在长江中下游平原上的省份：安徽、江苏、江西、浙江、上海。他们同属于一个美丽又富饶的大区——江南。那么问题来了，一提到江南，你会想到什么&#…...

编程日记 2025/5/28 15:05:15

harmony UI组件学习（1）

Image 图片组件 string格式，通常用来加载网络图片，需要申请网络访问权限:ohos.permission.INTERNET Image(https://xxx.png) PixelMap格式，可以加载像素图，常用在图片编辑中 Image(pixelMapobject) Resource格式，加…...

编程日记 2025/5/29 15:06:54

ECharts热力图-笛卡尔坐标系上的热力图，附视频讲解与代码下载

引言： 热力图（Heatmap）是一种数据可视化技术，它通过颜色的深浅变化来表示数据在不同区域的分布密集程度。在二维平面上，热力图将数据值映射为颜色，通常颜色越深表示数据值越大，颜色越浅表示数…...

编程日记 2025/5/27 17:39:50

React状态管理常见面试题目（一）

1. Redux 如何实现多个组件之间的通信?多个组件使用相同状态时如何进行管理? Redux 实现组件通信 Redux 是一个集中式的状态管理工具，通过共享一个全局 store 来实现多个组件之间的通信。通信机制： 所有状态保存在 Redux 的全局 store 中。使用 ma…...

编程日记 2025/5/29 22:35:41

.NET周刊【12月第2期 2024-12-08】

国内文章终于解决了.net在线客服系统总是被360误报的问题（对软件进行数字签名） https://www.cnblogs.com/sheng_chao/p/18581139 升讯威在线客服与营销系统由.net core和WPF开发，旨在开放、开源、共享。开发者为解决360与其他国产管家的误…...

编程日记 2025/5/29 21:40:04

YOLOv8目标检测(七)_AB压力测试

YOLOv8目标检测(一)_检测流程梳理：YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集：YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型：YOLOv8目标检测(三)_训…...

编程日记 2025/5/30 8:30:12

多个图片转换为PDF文件

将多个图片转换为PDF文件在Python中可以通过多个库来实现，其中最常用的库之一是Pillow（用于图像处理）和reportlab（用于生成PDF）。不过，对于直接图片转PDF的操作，更推荐使用Pillow配合PyMuPDF&am…...

编程日记 2025/5/28 2:24:10

ajax与fetch对比

实现效果

代码实现

ajax封装

node实现的数据接口

相关文章：