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

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

news 2026/3/30 7:59:50

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对比实现效果代码实现 …...

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

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

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

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

Docker 安装系列 1、拉取最新版本（zentao 21.2） [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版本推出以来，向量检索的能力受到了很多客户的关注，也纷纷表达希望OB能拓展更多多模数据库大模型的AI应用实践。在上篇文章 👉 OceanBase LLM，免费构建你的专属 AI 助手 ，我们介绍了如何去搭建一…...

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

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

1.实战内容 (1) 加载鸢尾花数据集(iris.txt)并存到iris_df中,使用seaborn.lmplot寻找class（种类）项中的异常值，其他异常值也同时处理。 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洞察（附原数据表）

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

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

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

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

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

Flutter组件————AppBar

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

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

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

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

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

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

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

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

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

近期更新完毕，建议关注、收藏！ http请求 URL 严格意义上应该是URI http or https http不加密不安全；https加密协议（公网使用） 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 是一款高性能的分布式文件系统，特别适合用于存…...

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

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

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

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

windows C#-使用构造函数

实例化类或结构时，将会调用其构造函数。构造函数与该类或结构具有相同名称，并且通常初始化新对象的数据成员。在下面的示例中，通过使用简单构造函数定义了一个名为 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

基础数据结构---栈

顺序表实现一、栈类的声明栈是一种特殊的线性表，可以由顺序表来实现，也可以由链表来实现，这节课，我们采用顺序表来实现栈。 #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视频融合共享平台在果园农场等项目中的视频监控系统搭建方案

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

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

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

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

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

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

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

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

5个高效能的LabelImg图像标注效率提升实践

5个高效能的LabelImg图像标注效率提升实践【免费下载链接】labelImg LabelImg is now part of the Label Studio community. The popular image annotation tool created by Tzutalin is no longer actively being developed, but you can check out Label Studio, the open s…...

编程新知 2026/3/30 6:16:49