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

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

news 文章来源：https://blog.csdn.net/qq_27702739/article/details/144606582 2025/5/18 16:17:54

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

【蓝桥杯】43696.小数第n位

小数第n位 题目描述 我们知道&#xff0c;整数做除法时&#xff0c;有时得到有限小数&#xff0c;有时得到无限循环小数。如果我们把有限小数的末尾加上无限多个0&#xff0c;那么有限小数和无限小数就都有了统一的形式。 本题的任务是:在上面的约定下&#xff0c;求整数除法…...

编程日记 2024/12/21 22:35:52

进程间通信方式---消息队列（System V IPC）

进程间通信方式—消息队列&#xff08;System V IPC&#xff09; 文章目录 进程间通信方式---消息队列&#xff08;System V IPC&#xff09;消息队列1.消息队列进程间通信原理2.msgget 系统调用3.msgsnd 系统调用4.msgrcv 系统调用5.msgctl 系统调用6.函数使用案例7.实现生产者…...

编程日记 2024/12/21 22:28:46

windows10 安装wsl、迁移到其他盘

介绍一下在windows10 安装和迁移wsl。由于公司发了通知不能在使用docker desktop&#xff0c;只能另找方法使用docker了&#xff0c;于是想安装一个wsl&#xff0c;然后在装一个docker。 安装wsl ## 查看wsl 版本 wsl.exe --list --online## 安装Ubuntu-22.04 wsl.exe --inst…...

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

el-divide（vue3总）

分割线 使用...

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

python —— 常用命令行的命令

目 录 python命令行查看安装版本查看安装路径升级pip工具安装包升级包卸载安装包查看包的信息详情查询已安装的包查询可升级的包显示包所在目录及信息搜索包使用指定版本运行脚本运行常见错误 python命令行 产品研发中通常需要使用一些小工具来辅助调试功能&#xff0c;比如采…...

编程日记 2024/12/21 22:16:33

C++ 23版的最新特性

C 23 是 C 编程语言的最新标准版本&#xff0c;于 2023 年正式发布&#xff0c;带来了诸多新特性与改进&#xff0c;以下是一些主要内容&#xff1a; 1.语言特性 1.显式对象参数&#xff08;Deducing this&#xff09;&#xff1a;显式对象参数&#xff08;Deducing this&…...

编程日记 2024/12/21 22:09:27

什么是 Memory-bound stalls，以及如何优化

Memory-bound stalls 是指在计算机系统中&#xff0c;程序的性能受到内存访问速度的限制&#xff0c;导致处理器无法高效执行指令。这种情况通常发生在 CPU 需要等待数据从内存中加载时&#xff0c;而不是在执行计算或处理指令时。 Memory-bound stalls 的成因 访问延迟&…...

编程日记 2024/12/21 22:08:26

机器学习 | 非线性回归拟合数据时的离群值检测

非线性回归是一种用于模拟变量之间复杂关系的强大工具。然而&#xff0c;离群值的存在可能会显着扭曲结果&#xff0c;导致参数估计不准确和预测不可靠。因此&#xff0c;检测离群值对于稳健的非线性回归分析至关重要。本文深入研究了在非线性回归中识别离群值的方法和技术&…...

编程日记 2024/12/21 22:07:24

使用elasticsearch-head插件修改elasticsearch数据

1、先使用elasticsearch-head插件基本查询功能找到要修改的数据 2、切换到复合查询界面 url&#xff1a; http://es的ip地址:端口号/索引名称/文档类型&#xff08;没特殊设置过就是_doc&#xff09;/文档id/ 例子&#xff1a;http://127.0.0.1:9200/tab_inout_record/_doc/84…...

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

202412月最新植物大战僵尸杂交版【V3.0.1】更新内容与下载

以下是对UI优化和新内容添加的摘要&#xff1a; UI优化摘要&#xff1a; 主界面重做&#xff1a;对游戏的主界面进行全面的设计更新&#xff0c;提升用户体验。商店重做&#xff1a;对游戏内的商店界面进行重新设计&#xff0c;以改善玩家的购物体验。选卡界面增加图鉴功能&a…...

编程日记 2024/12/21 22:02:15