【原生js案例】ajax的简易封装实现后端数据交互
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月20日最新版
1.去官网下载最新的Android Studio，网址：https://developer.android.com/studio?hlzh-cn 2.下载加速器，注册账号，开启加速器。网址：放在文末。 3.下载安卓代码，项目的路径上不能有中文，特别是…...
Docker 安装 禅道-21.2版本-外部数据库模式
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…...
写SQL太麻烦？免费搭建 Text2SQL 应用，智能写 SQL | OceanBase AI 实践
自OceanBase 4.3.3版本推出以来，向量检索的能力受到了很多客户的关注，也纷纷表达希望OB能拓展更多 多模数据库大模型 的AI应用实践。 在上篇文章 👉 OceanBase LLM，免费构建你的专属 AI 助手 ，我们介绍了如何去搭建一…...
数据分析实战—鸢尾花数据分类
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抖音电商母婴行业分析报告汇总PDF洞察（附原数据表）
原文链接：https://tecdat.cn/?p38651 在数字化浪潮的席卷下，抖音电商母婴行业正经历着深刻变革。当下，年轻一代父母崛起，特别是 24 至 30 岁以及 18 至 23 岁的群体成为抖音母婴行业兴趣人群的主力军。他们带来全新育儿理念&…...
堆栈粉碎的原理与预防攻击措施
1、堆栈粉碎的原理 “堆栈粉碎”（stack smashing）指的是在计算机程序中利用缓冲区溢出漏洞来修改或破坏函数调用栈的过程。以下是其基本原理： 缓冲区溢出：当程序接收输入数据时，如果没有适当的边界检查和验证&#x…...
Flutter组件————AppBar
AppBar 是 Flutter 中用于创建应用程序顶部栏的组件，它遵循 Material Design 规范。 参数： 参数名称类型描述titleWidget设置 AppBar 中的标题文本或自定义标题小部件。automaticallyImplyLeadingbool决定是否自动添加返回按钮（如果页面不是…...
请问深度学习直接缝了别的模型，在论文中这种创新点应该如何描述呢？
作者：星辰 链接：https://www.zhihu.com/question/599461738/answer/3289126344 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 作为散养硕士，我们希望能早早发小论文，…...
微流控专题 | 微流体应用说明——藻酸盐微球生产简介
基于水凝胶的递送系统正被越来越多地应用于各个领域，包括封装、保护以及在制药、保健品、食品工业中释放生物活性物质，还用于细胞/细菌/微生物的培养与植入，以及生物研究中基于细胞的基因操作。 尺寸在 50m 范围内的高度单分散的藻酸盐微球 —…...
【前后端】HTTP网络传输协议
近期更新完毕，建议关注、收藏！ http请求 URL 严格意义上应该是URI http or https http不加密不安全；https加密协议（公网使用） http端口号80 https端口号443GET or POST GET和POST是HTTP请求的两种基本方法. 因为POST需…...
Fastdfs V6.12.1集群部署(arm/x86均可用)
文章目录 一、 Fastdfs 介绍二、部署 信息三、步骤tracker/storage 机器的 compose 内容storage 机器的 composetracker 与 storage 启动目录层级与配置文件测试测试集群扩容与缩减注意事项 一、 Fastdfs 介绍 FastDFS 是一款高性能的分布式文件系统，特别适合用于存…...
【LeetCode每日一题】——434.字符串中的单词数
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【解题思路】七【时空频度】八【代码实现】九【提交结果】 一【题目类别】 字符串 二【题目难度】 简单 三【题目编号】 434.字符串中的单词数 四【题目描述】 统计字符串中的单词个…...
windows C#-使用构造函数
实例化类或结构时，将会调用其构造函数。 构造函数与该类或结构具有相同名称，并且通常初始化新对象的数据成员。 在下面的示例中，通过使用简单构造函数定义了一个名为 Taxi 的类。 然后使用 new 运算符对该类进行实例化。 在为新对象分配内存…...
[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…...
基础数据结构---栈
顺序表实现 一、栈类的声明 栈是一种特殊的线性表，可以由顺序表来实现，也可以由链表来实现，这节课，我们采用顺序表来实现栈。 #include <iostream>#include <stdexcept>using namespace std;template<typename …...
【HarmonyOS之旅】DevEco Studio的安装与环境配置
目录 1 -> 下载与安装DevEco Studio 1.1 -> 运行环境要求 1.2 -> 下载和安装DevEco Studio 2 -> 配置环境变量 3 -> 配置开发环境 4 -> 开发项目准备 5 -> 实用小技巧 5.1 -> 中文插件 2 -> 简化工程目录栏 1 -> 下载与安装DevEco Stud…...
Liveweb视频融合共享平台在果园农场等项目中的视频监控系统搭建方案
一、背景介绍 在我国的大江南北遍布着各种各样的果园，针对这些地处偏僻的果园及农场等环境，较为传统的安全防范方式是建立围墙，但是仅靠围墙仍然无法阻挡不法分子的有意入侵和破坏，因此为了及时发现和处理一些难以察觉的问题&…...
Android4.4 在系统中添加自己的System Service
添加系统service时，源码限制只能添加以android开头的包名，如果不是android开头的，编译时会提示找不到对应的文件。 比如说在系统中添加一个包名为：tel.gateway.connservice的系统服务。 1.在framework/base目录下面创建如下路径&a…...
【C++】C++实现字符串大小写转换功能
在C中，实现字符串大小写转换可以通过标准库中的函数来完成。以下是两种常见的方法： 使用标准库函数std::transform std::transform是一个泛型算法，可以用来对序列中的每个元素应用一个给定的函数，并把结果存储到另一个序列中。这…...
MongoDB学习和应用(高效的非关系型数据库)
一丶 MongoDB简介 对于社交类软件的功能，我们需要对它的功能特点进行分析： 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具： mysql：关系型数据库&am…...
使用分级同态加密防御梯度泄漏
抽象 联邦学习 （FL） 支持跨分布式客户端进行协作模型训练，而无需共享原始数据，这使其成为在互联和自动驾驶汽车 （CAV） 等领域保护隐私的机器学习的一种很有前途的方法。然而，最近的研究表明&…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统，可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析：自动解析Markdown文档结构PPT模板分析：分析PPT模板的布局和风格智能布局决策：匹配内容与合适的PPT布局自动…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持，不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元（GRU）长短期记忆神经网络（LSTM）…...
JVM暂停（Stop-The-World，STW）的原因分类及对应排查方案
JVM暂停（Stop-The-World，STW）的完整原因分类及对应排查方案，结合JVM运行机制和常见故障场景整理而成： 一、GC相关暂停 1. 安全点（Safepoint）阻塞 现象：JVM暂停但无GC日志，日志显示No GCs detected。原因：JVM等待所有线程进入安全点（如…...
Python 包管理器 uv 介绍
Python 包管理器 uv 全面介绍 uv 是由 Astral（热门工具 Ruff 的开发者）推出的下一代高性能 Python 包管理器和构建工具，用 Rust 编写。它旨在解决传统工具（如 pip、virtualenv、pip-tools）的性能瓶颈，同时…...
让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中，损失函数的选择对模型性能具有决定性影响。均方误差（MSE）作为经典的损失函数，在处理干净数据时表现优异，但在面对包含异常值的噪声数据时，其对大误差的二次惩罚机制往往导致模型参数…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
uniapp手机号一键登录保姆级教程（包含前端和后端）
目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号（第三种）后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...