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

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

news 2026/5/15 9:52:38

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

如何轻松解包网易游戏资源：unnpk工具完整使用指南

如何轻松解包网易游戏资源&#xff1a;unnpk工具完整使用指南 【免费下载链接】unnpk 解包网易游戏NeoX引擎NPK文件&#xff0c;如阴阳师、魔法禁书目录。 项目地址: https://gitcode.com/gh_mirrors/un/unnpk 你是否曾好奇网易热门游戏如《阴阳师》、《魔法禁书目录》中…...

编程新知 2026/5/15 9:51:47

Adafruit M4SK开发板外设接口实战：从I2C到PDM麦克风的嵌入式交互设计

1. 项目概述与核心价值如果你正在寻找一款既能玩转嵌入式图形界面&#xff0c;又能轻松连接各种传感器、执行器&#xff0c;并且自带丰富交互外设的开发板&#xff0c;Adafruit M4SK绝对是一个会让你眼前一亮的选项。它不像传统的单片机开发板那样“光秃秃”&#xff0c;而是将…...

编程新知 2026/5/15 8:34:24

Midjourney葡萄酒视觉叙事术（从葡萄藤到酒标的一站式AI印相工作流）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney葡萄酒视觉叙事术&#xff08;从葡萄藤到酒标的一站式AI印相工作流&#xff09; 在数字酒庄时代&#xff0c;视觉叙事已成为品牌差异化的核心引擎。Midjourney 不再仅是图像生成工具&#xf…...

编程新知 2026/5/15 7:56:46

蓝牙低功耗(BLE)技术演进与物联网应用实践

1. 蓝牙低功耗技术演进与核心优势蓝牙低功耗&#xff08;Bluetooth Low Energy&#xff0c;简称BLE&#xff09;自2010年随蓝牙4.0标准推出以来&#xff0c;已成为物联网设备连接的事实标准。与传统蓝牙技术相比&#xff0c;BLE最显著的特点是采用"间歇性唤醒"的工作…...

编程新知 2026/5/15 6:45:32

Poppins字体技术解析：跨语言几何字体的架构设计与实战应用

Poppins字体技术解析&#xff1a;跨语言几何字体的架构设计与实战应用 【免费下载链接】Poppins Poppins, a Devanagari Latin family for Google Fonts. 项目地址: https://gitcode.com/gh_mirrors/po/Poppins 在全球化数字产品设计中&#xff0c;如何为多语言用户提供…...

编程新知 2026/5/15 6:31:07

AI智能提示词生成器——帮你更高效地使用AI解决问题

一款功能强大的Windows桌面应用程序&#xff0c;帮助用户快速生成标准化的AI提示词&#xff0c;支持多种行业和内容类型。 软件下载地址 功能特点 1. 丰富的提示词模板库 软件内置了庞大的提示词模板数据库&#xff0c;覆盖多个行业和场景&#xff1a; 分类行业/类型模板数…...

编程新知 2026/5/15 6:27:06

手把手教你用LabelImg标注自己的数据集：从哆啦A梦到实战项目的YOLOv5训练准备

从哆啦A梦到工业级应用&#xff1a;LabelImg数据标注与YOLOv5训练全流程实战 在计算机视觉领域&#xff0c;数据标注的质量往往决定了模型性能的上限。就像建筑需要坚实的地基一样&#xff0c;一个优秀的YOLOv5模型离不开精心准备的数据集。本文将带您从零开始&#xff0c;通过…...

编程新知 2026/5/15 5:01:34

71.人工智能实战：RAG 权限过滤怎么做？从前期发现“越权召回”到文档 ACL、检索过滤与引用权限校验

人工智能实战：RAG 权限过滤怎么做？从前期发现“越权召回”到文档 ACL、检索过滤与引用权限校验 一、问题场景：AI 没有直接泄露权限，但检索已经越界了 企业级 RAG 系统上线后，最危险的问题之一不是“答错”，而是： 用户问了一个正常问题，但系统召回了他不该看到的资料。…...

编程新知 2026/5/15 4:25:24

C++面向对象编程核心概念与实践：从封装、继承到多态与设计模式

1. 项目概述&#xff1a;从代码仓库到面向对象思想的内化看到这个仓库标题Ayat-Gamal/Cpp_OOP_Labs&#xff0c;我第一反应是&#xff0c;这大概率是一位计算机科学或软件工程专业的学生&#xff08;或者是一位自学者&#xff09;在学习C面向对象编程&#xff08;OOP&#xff0…...

编程新知 2026/5/15 4:14:22

如何在macOS上轻松运行Windows程序？Whisky完整指南教程

如何在macOS上轻松运行Windows程序&#xff1f;Whisky完整指南教程 【免费下载链接】Whisky A modern Wine wrapper for macOS built with SwiftUI 项目地址: https://gitcode.com/gh_mirrors/wh/Whisky 想在macOS上运行Windows专属软件却不想安装虚拟机&#xff1f;Whi…...

编程新知 2026/5/15 3:58:20