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

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

news 2025/12/21 5:27:01

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

编程日记 2024/12/21 23:51:13

安卓环境配置及打开新项目教程，2024年12月20日最新版

1.去官网下载最新的Android Studio&#xff0c;网址&#xff1a;https://developer.android.com/studio?hlzh-cn 2.下载加速器&#xff0c;注册账号&#xff0c;开启加速器。网址&#xff1a;放在文末。 3.下载安卓代码&#xff0c;项目的路径上不能有中文&#xff0c;特别是…...

编程日记 2024/12/21 23:32:57

Docker 安装 禅道-21.2版本-外部数据库模式

Docker 安装系列 1、拉取最新版本&#xff08;zentao 21.2&#xff09; [rootTseng ~]# docker pull hub.zentao.net/app/zentao Using default tag: latest latest: Pulling from app/zentao 55ab1b300d4b: Pull complete 6b5749e5ef1d: Pull complete bdccb03403c1: Pul…...

编程日记 2024/12/21 23:31:56

写SQL太麻烦？免费搭建 Text2SQL 应用，智能写 SQL | OceanBase AI 实践

自OceanBase 4.3.3版本推出以来&#xff0c;向量检索的能力受到了很多客户的关注&#xff0c;也纷纷表达希望OB能拓展更多 多模数据库大模型 的AI应用实践。 在上篇文章 &#x1f449; OceanBase LLM&#xff0c;免费构建你的专属 AI 助手 &#xff0c;我们介绍了如何去搭建一…...

编程日记 2024/12/21 23:29:54

数据分析实战—鸢尾花数据分类

1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class&#xff08;种类&#xff09;项中的异常值&#xff0c;其他异常值也同时处理 。 import pandas as pd from sklearn.datasets import load_iris pd.set_option(display.max_columns, N…...

编程日记 2024/12/21 23:27:52

【专题】2024抖音电商母婴行业分析报告汇总PDF洞察（附原数据表）

原文链接&#xff1a;https://tecdat.cn/?p38651 在数字化浪潮的席卷下&#xff0c;抖音电商母婴行业正经历着深刻变革。当下&#xff0c;年轻一代父母崛起&#xff0c;特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…...

编程日记 2024/12/21 23:25:50

堆栈粉碎的原理与预防攻击措施

1、堆栈粉碎的原理 “堆栈粉碎”&#xff08;stack smashing&#xff09;指的是在计算机程序中利用缓冲区溢出漏洞来修改或破坏函数调用栈的过程。以下是其基本原理&#xff1a; 缓冲区溢出&#xff1a;当程序接收输入数据时&#xff0c;如果没有适当的边界检查和验证&#x…...

编程日记 2024/12/21 23:24:49

Flutter组件————AppBar

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

编程日记 2024/12/21 23:21:45

请问深度学习直接缝了别的模型，在论文中这种创新点应该如何描述呢？

作者&#xff1a;星辰 链接&#xff1a;https://www.zhihu.com/question/599461738/answer/3289126344 来源&#xff1a;知乎 著作权归作者所有。商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处。 作为散养硕士&#xff0c;我们希望能早早发小论文&#xff0c…...

编程日记 2024/12/21 23:17:40

微流控专题 | 微流体应用说明——藻酸盐微球生产简介

基于水凝胶的递送系统正被越来越多地应用于各个领域&#xff0c;包括封装、保护以及在制药、保健品、食品工业中释放生物活性物质&#xff0c;还用于细胞/细菌/微生物的培养与植入&#xff0c;以及生物研究中基于细胞的基因操作。 尺寸在 50m 范围内的高度单分散的藻酸盐微球 —…...

编程日记 2024/12/21 23:15:39

【前后端】HTTP网络传输协议

近期更新完毕&#xff0c;建议关注、收藏&#xff01; http请求 URL 严格意义上应该是URI http or https http不加密不安全&#xff1b;https加密协议&#xff08;公网使用&#xff09; http端口号80 https端口号443GET or POST GET和POST是HTTP请求的两种基本方法. 因为POST需…...

编程日记 2024/12/21 23:13:36

Fastdfs V6.12.1集群部署(arm/x86均可用)

文章目录 一、 Fastdfs 介绍二、部署 信息三、步骤tracker/storage 机器的 compose 内容storage 机器的 composetracker 与 storage 启动目录层级与配置文件测试测试集群扩容与缩减注意事项 一、 Fastdfs 介绍 FastDFS 是一款高性能的分布式文件系统&#xff0c;特别适合用于存…...

编程日记 2024/12/21 23:07:25

【LeetCode每日一题】——434.字符串中的单词数

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【时空频度】八【代码实现】九【提交结果】 一【题目类别】 字符串 二【题目难度】 简单 三【题目编号】 434.字符串中的单词数 四【题目描述】 统计字符串中的单词个…...

编程日记 2024/12/21 23:03:22

windows C#-使用构造函数

实例化类或结构时&#xff0c;将会调用其构造函数。 构造函数与该类或结构具有相同名称&#xff0c;并且通常初始化新对象的数据成员。 在下面的示例中&#xff0c;通过使用简单构造函数定义了一个名为 Taxi 的类。 然后使用 new 运算符对该类进行实例化。 在为新对象分配内存…...

编程日记 2024/12/21 23:01:19

[react]redux异步处理和重写useDispatch

异步代码 import { createAsyncThunk, createSlice } from reduxjs/toolkit; import { getBanner } from ../http/request; import store from /store; export const fetchBanner createAsyncThunk(recommend/banners,async (args, thunkAPI) > {const response await ge…...

编程日记 2024/12/21 22:55:12

基础数据结构---栈

顺序表实现 一、栈类的声明 栈是一种特殊的线性表&#xff0c;可以由顺序表来实现&#xff0c;也可以由链表来实现&#xff0c;这节课&#xff0c;我们采用顺序表来实现栈。 #include <iostream>#include <stdexcept>using namespace std;template<typename …...

编程日记 2024/12/21 22:54:11

【HarmonyOS之旅】DevEco Studio的安装与环境配置

目录 1 -> 下载与安装DevEco Studio 1.1 -> 运行环境要求 1.2 -> 下载和安装DevEco Studio 2 -> 配置环境变量 3 -> 配置开发环境 4 -> 开发项目准备 5 -> 实用小技巧 5.1 -> 中文插件 2 -> 简化工程目录栏 1 -> 下载与安装DevEco Stud…...

编程日记 2024/12/21 22:47:04

Liveweb视频融合共享平台在果园农场等项目中的视频监控系统搭建方案

一、背景介绍 在我国的大江南北遍布着各种各样的果园&#xff0c;针对这些地处偏僻的果园及农场等环境&#xff0c;较为传统的安全防范方式是建立围墙&#xff0c;但是仅靠围墙仍然无法阻挡不法分子的有意入侵和破坏&#xff0c;因此为了及时发现和处理一些难以察觉的问题&…...

编程日记 2024/12/21 22:42:59

Android4.4 在系统中添加自己的System Service

添加系统service时&#xff0c;源码限制只能添加以android开头的包名&#xff0c;如果不是android开头的&#xff0c;编译时会提示找不到对应的文件。 比如说在系统中添加一个包名为&#xff1a;tel.gateway.connservice的系统服务。 1.在framework/base目录下面创建如下路径&a…...

编程日记 2024/12/21 22:37:54

【C++】C++实现字符串大小写转换功能

在C中&#xff0c;实现字符串大小写转换可以通过标准库中的函数来完成。以下是两种常见的方法&#xff1a; 使用标准库函数std::transform std::transform是一个泛型算法&#xff0c;可以用来对序列中的每个元素应用一个给定的函数&#xff0c;并把结果存储到另一个序列中。这…...

编程日记 2024/12/21 22:36:53

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/12/19 6:18:58

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

编程新知 2025/12/19 18:12:53

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/12/19 23:59:34

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/12/16 7:09:20

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2025/12/14 10:18:18

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2025/12/16 17:13:34

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

编程新知 2025/12/20 9:37:32

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/12/20 18:09:59

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

编程新知 2025/12/16 3:15:21

搭建DNS域名解析服务器(正向解析资源文件)

正向解析资源文件 1&#xff09;准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2&#xff09;服务端安装软件&#xff1a;bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...

编程新知 2025/12/13 12:30:45