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

jquery+ajax+SpringBoot实现前后端分离技术

news 来源：原创 2025/8/13 17:50:37

一、前端方面：

第1步，在前端HTML页面的头部引入jquery

<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>XXX</title><link rel="stylesheet" type="text/css" href="css/reset.css"><link rel="stylesheet" type="text/css" href="css/main.css"><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
</head>

第2步，设定要被测试的文本框的值，如：

<input type="text" class="input_text fl" id="testdata" name="testdata" value="book" placeholder="搜索商品"><a href="javascript:ajaxtest();">触发事件链接</a>

第3步，写入ajax代码：

<script type="text/javascript">function ajaxtest(){var t = $("#testdata").val();// alert(t);$.ajax({type: "POST",	url: "http://localhost:8080/demo/loginGo",data:{username:t},dataType: "json",success: function(data) {console.log(data);// alert(data.data[0].username);// location.href="detail.html"window.open("detail.html","_self");//请求成功后回调函数},error: function(jqXHR){alert(jqXHR);//请求失败后回调函数}});}</script>

其中，返回的detail.html为你要跳转的页面，这个可以根据自己的业务自行决定是否跳转或跳转到哪里。

一、后端方面：

第1步，自定义一个实体类，如Person类：

public class Person {private int id;private String username;private String password;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}

第2步，自定义一个控制类，如：

@Controller
@RequestMapping("/demo")
public class JNTestDemo {@AutowiredPersonService personService;@RequestMapping("/loginGo")@ResponseBodypublic ResponseEntity<ResultMessage<Person>> loginGo(@ApiParam Person person){System.out.println(person.getUsername());List<Person> flag = personService.login();ResultMessage<Person> resultMessage = new ResultMessage(200,"成功",flag);return ResponseEntity.ok().body(resultMessage);}
}

这里业务逻辑层就省略啦，无非就是查询出一个集合，自行补全吧。

第3步，自定义一个跨域的配置类，如：

package com.zhongji.jisuanji22.config;import org.springframework.stereotype.Component;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;/*** 跨域配置类*/@Component
public class SimpleCORSFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest reqs = (HttpServletRequest) req;String curOrigin = reqs.getHeader("Origin");HttpServletResponse response = (HttpServletResponse) res;response.setHeader("Access-Control-Allow-Origin", curOrigin == null ? "true" : curOrigin);response.setHeader("Access-Control-Allow-Credentials", "true");response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, HEAD");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Headers", "access-control-allow-origin, authority, content-type, version-info, X-Requested-With");response.setContentType("application/json;charset=UTF-8");chain.doFilter(req, res);}@Overridepublic void destroy() {}
}

三、测试：

我们把后台SpringBoot运行起来，默认端口是8080，把前端页面放入到nginx中，然后访问被测试的页面，点击触发ajax函数的事件，即可访问后台了。如访问地址：http://localhost/index.html。访问后观察控制台的输出，发现值已经传过来了，证明前后端分离数据交互没有问题。

jquery+ajax+SpringBoot实现前后端分离技术

一、前端方面： 第1步，在前端HTML页面的头部引入jquery <head><meta http-equiv"Content-Type" content"text/html;charsetUTF-8"><title>XXX</title><link rel"stylesheet" type"text/…...

编程日记 2025/8/13 17:50:37

阀门产业发展方向报告（石油化工阀门应用技术交流大会）

本文大部分内容来自中国通用机械工业协会副会长张宗列在“2024全国石油化工阀门应用技术交流大会”上发表的报告。一、国外阀门产业发展从全球阀门市场分布看，亚洲是最大的工业阀门市场，美洲是全球第二大工业阀门市场，欧洲位列第三。从国…...

编程日记 2025/8/13 17:47:35

华为云Astro后端开发中对象、事件、脚本、服务编排、触发器、工作流等模块的逻辑关系如何？以iotDA数据传输过程举例演示元素工作过程

目录 🏭 类比总览：低代码平台就像一座自动化工厂 🧱 1. 对象（Object） = 工厂里的“原材料仓库” 🧱 2. 结构体（Structure） = 自定义的“装配模具” 🔔 3. 事件（Event） = 触发的“感应器” ✍️ 4. 脚本（Script） = 后台的“逻辑处理代码” ⚙️ 5. 服务编…...

编程日记 2025/8/10 22:47:36

面向小型企业顶点项目的网络安全咨询人机协作框架

1. 简介 1.1. 背景和动机由于小型企业无法访问结构化系统，且缺乏大型组织通常拥有的专用资源，它们经常面临巨大的网络安全挑战 [ [1 ]。为大型企业设计的网络安全框架通常对小型企业来说过于复杂且不切实际，导致它们容易受到复杂的网络威胁 2 ]。这种复杂性可能导致小型…...

编程日记 2025/8/9 14:54:46

RSAC 2025观察：零信任+AI=网络安全新范式

2025年4月28日~5月1日，全球最具影响力的网络安全盛会RSAC 2025在美国旧金山举办，吸引了全球44,000名网络安全从业者参与。大会以“Many Voices. One Community.”为主题，聚焦AI安全、供应链风险、零信任等核心议题。其中，AI Agent…...

编程日记 2025/8/13 17:49:28

ruoyi-flowable-plus 前端框架启动报错修复

版本 1. ruoyi-flowable-plus 前端框架启动报错修复启动时设置环境变量 "scripts": {"dev": "SET NODE_OPTIONS--openssl-legacy-provider && vue-cli-service serve","build:prod": "vue-cli-service build",&qu…...

编程日记 2025/8/10 21:44:32

安全可控·高效响应|北峰智能互通矿业通信系统解决方案

项目概况随着矿业行业工作环境日益复杂，涵盖地下开采、露天挖掘、矿物运输及深加工等多个环节，作业区域呈现广阔且分散的特点，往往存在诸多安全风险。当面临突发事故，由于应急救援体系不完善，救援通信系统相对落后&a…...

编程日记 2025/8/13 17:47:55

ubuntu查看安装的软件包的位置

在 Ubuntu 中，libcli11-dev 是一个头文件库（header-only），因此它不会像动态库（.so 文件）那样有明确的下载路径。但你可以通过以下方法查看它的安装位置： 1. 查看 libcli11-dev 安装的文件使用…...

编程日记 2025/8/13 17:49:01

【金仓数据库征文】金仓数据库 KES 助力企业数据库迁移的实践路径

在企业数字化转型浪潮的强力推动下，数据库迁移已成为企业升级 IT 架构、提升数据管理能力的关键环节。从 MySQL 到金仓数据库 KingbaseES（KES）的迁移方案，为企业提供了一条高效、可靠的数据库升级路径。一、迁移挑战与金仓数据…...

编程日记 2025/8/13 17:47:57

准备nginx安装文件：nginx-1.26.2.tar.gz cd /usr/local wget http://nginx.org/download/nginx-1.26.2.tar.gz tar -zxvf nginx-1.26.2.tar.gz && cd nginx-1.26.2 1.创建安装目录 mkdir nginx 2.解压安装文件nginx-1.26.2.tar.gz tar -zxvf nginx-1.26…...

编程日记 2025/8/13 17:46:22

kotlin @JvmStatic注解的作用和使用场景

1. JvmStatic 的作用 JvmStatic 是 Kotlin 提供的一个注解，用于在 JVM 上将伴生对象（companion object）中的方法或属性暴露为 Java 静态方法或字段。作用对象：只能用在 companion object 中的函数或属性。效果： 在 …...

编程日记 2025/8/13 17:45:01

Blind SSRF with Shellshock exploitation过关

Blind SSRF with Shellshock exploitation 生活就像一杯咖啡，苦与甜都是必需的，关键是要学会享受每一口。先说通关方法： 1.首先在bp的扩展商店安装插件 Collaborator Everywhere 2.进入靶场首页复制url https://0af600d3048daad080e6…...

编程日记 2025/8/13 17:46:33

2025-05-08 Unity 网络基础9——FTP通信

文章目录 1 FTP1.1 工作原理1.2 传输模式 2 搭建 FTP 服务器2.1 启用服务2.2 配置站点2.3 设置防火墙2.4 指定用户登录 3 常用 API3.1 NetworkCredential3.2 FtpWebRequest3.3 FtpWebResponse 4 实战操作4.1 上传文件4.2 下载文件4.3 删除文件4.4 获取文件大小4.5 创建文件夹4.…...

编程日记 2025/8/13 17:46:34

3.2.3 掌握RDD转换算子 - 5. 合并算子 - union()

在本节课中，我们学习了Spark RDD的union()算子，它能够将两个数据类型一致的RDD合并为一个新的RDD，主要用于整合不同数据源。通过案例演示，我们成功将两个简单的数字RDD合并，直观地看到合并结果是按原顺序纵向拼接&…...

编程日记 2025/8/13 17:46:23

数据来源合法性尽职调查：保障权益的关键防线

首席数据官高鹏律师团队在当今数字化时代，数据已成为企业和个人最为宝贵的资产之一。然而，伴随着数据的广泛应用与流通，其来源的合法性问题愈发凸显，犹如隐藏在暗处的礁石，稍不留神就可能让涉事主体陷入法律的漩涡。…...

编程日记 2025/8/11 20:39:38

sui在windows虚拟化子系统Ubuntu和纯windows下的安装和使用

一、sui在windows虚拟化子系统Ubuntu下的安装使用（WindowsWsl2Ubuntu24.04） 前言：解释一下WSL、Ubuntu的关系 WSL（Windows Subsystem for Linux）是微软推出的一项功能，允许用户在 Windows 系统中原生运行…...

编程日记 2025/8/10 15:59:24

springmvc的入门案例

springmvc的概述 SpringMVC的概述是一种基于Java实现的MVC设计模型的请求驱动类型的轻量级WEB框架。Spring MVC属于SpringFrameWork的后续产品，已经融合在Spring Web Flow里面。Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的 MVC 架…...

编程日记 2025/6/29 4:44:08

【MCP】为什么使用Streamable HTTP: 相比SSE的优势与实践指南

在现代Web开发中，实时通信已经成为许多应用的核心需求。从聊天应用到股票市场更新，从游戏服务器到AI模型通信，各种技术应运而生以满足这些需求。最近，Model Context Protocol (MCP) 引入了一种新的传输机制 —— Streamable HTTP&…...

编程日记 2025/8/10 14:13:47

CentOS的防火墙工具(firewalld和iptables)的使用

CentOS的防火墙工具因版本不同而异，以下是具体操作步骤： 一、firewalld（CentOS 7及以上默认工具）‌ ‌1、安装与启动‌： 安装：sudo yum install firewalld 启动服务：sudo systemctl start fir…...

编程日记 2025/8/13 17:13:07

解析小米大模型MiMo：解锁语言模型推理潜力

一、基本介绍 1.1 项目背景在大型语言模型快速发展的背景下，小米AI团队推出MiMo系列模型，突破性地在7B参数规模上实现卓越推理能力。传统观点认为32B以上模型才能胜任复杂推理任务，而MiMo通过创新的训练范式证明：精心设计的预训练和强化学习策略，可使小模型迸发巨大推理…...

编程日记 2025/8/10 12:37:21

web 自动化之 Selenium 元素定位和浏览器操作

文章目录一、元素定位的八大方法1、基于 id/name/class/tag_name 定位2、基于 a 标签元素的链接文本定位3、基于xpath定位4、css定位二、浏览器操作1、信息获取2、浏览器关闭3、浏览器控制一、元素定位的八大方法 web 自动化测试就是通过代码对网页进行测试，在…...

编程日记 2025/8/12 5:35:39

vscode如何使用 GitHub Copilot

1.在vscode中扩展工具栏搜索“copilot”，选择GitHub Copilot安装。 2.使用快捷键CtrlAltI 打开聊天界面，输入问题后回车即可使用。注意： 使用copilot需要使用GitHub账号先登录，如果打不开登录页面，需要修改host文件&a…...

编程日记 2025/8/10 10:48:46

AWS之存储服务

存储术语分类接口/技术类型应用场景特点关系及区别机械硬盘接口 IDE（Integrated Drive Electronics） 早期用于个人电脑，现已逐渐淘汰机械硬盘接口、固态硬盘接口是硬盘与主机或其他设备连接的物理和协议规范； FC - …...

编程日记 2025/7/26 11:31:55

安装 Docker

一、CentOS 系统安装 Docker 1. 卸载旧版本（如有） sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine 2. 安装依赖工具 sudo yum install -y…...

编程日记 2025/8/9 19:08:11

代理协议解析：如何根据需求选择HTTP、HTTPS或SOCKS5？

在现代网络中，代理服务器是一种常见的工具，用于提高安全性、匿名性和访问速度。常见的代理协议包括HTTP、HTTPS和SOCKS5。本文将详细解析这三种代理协议，并帮助您根据具体需求选择最合适的代理协议。一、HTTP代理 1.1 特点用途广泛&…...

编程日记 2025/8/10 8:35:13

用于构建安全AI代理的开源防护系统

大家读完觉得有帮助记得及时关注！！！ 大型语言模型（LLMs）已经从简单的聊天机器人演变为能够执行复杂任务的自主代理，例如编辑生产代码、编排工作流程以及基于不受信任的输入（如网页和电子邮件&am…...

编程日记 2025/8/9 23:20:20

CTF-DAY10

[SWPUCTF 2021 新生赛]zipbomb 题目描述： 请注意，不要以任何方式尝试完全解压该文件，运存被塞满后果自负。请尝试分析该文件。使用WinRAR解压打开 CTFSHOW刷题 crypto11 密文：a8db1d82db78ed452ba0882fb9554fc 提交 flag{明…...

编程日记 2025/8/9 17:15:04

WHAT - react-query(TanStack Query) vs swr 请求

文章目录 react-query什么是 TanStack Query（原 React Query）核心特性 TanStack Query vs SWR 对比具体特性对比哪个更适合你总结 react-query react-query（现已更名为 TanStack Query）和 SWR 一样，都是专注于远程数…...

编程日记 2025/8/9 16:21:55

WebFlux与HttpStreamable关系解析

1-Streamable 1-WebFlux与HttpStreamable关系解析2-MCP协议Streamable HTTP 2-参考网址 MCP协议Streamable HTTPMCP协议重大升级，Spring AI Alibaba联合Higress发布业界首个Streamable HTTP实现方案 3-WebFlux与HttpStreamable关系解析 WebFlux 和 HttpStreamabl…...

编程日记 2025/8/10 0:53:13

深度学习工程化：基于TensorFlow的模型部署全流程详解

深度学习工程化：基于TensorFlow的模型部署全流程详解引言在深度学习项目中，模型训练只是第一步，将模型成功部署到生产环境才是真正创造价值的关键。本文将全面介绍TensorFlow模型从训练到部署的完整工程化流程，涵盖多种部署场…...

编程日记 2025/7/29 10:10:20

RAG技术在测试用例生成中的应用

测试用例中的 RAG 通常指 Retrieval-Augmented Generation（检索增强生成） 在测试领域的应用，是一种结合检索与生成的技术方法，用于自动化生成或优化测试用例。核心概念 RAG 技术背景： • RAG 最初由 Meta 提出…...

编程日记 2025/8/9 20:16:49

uniapp + vue3 + 京东Nut动作面板组件：实现登录弹框组件（含代码、案例、小程序截图）

uniapp + vue3 + 京东Nut动作面板组件：实现登录弹框组件（含代码、案例、小程序截图）代码示下，不再赘述。动作面板组件：https://nutui-uniapp.netlify.app/components/feedback/actionsheet.html 项目背景业务需求描述： uniapp + vue3 + 京东Nut框架：实现登录弹框组…...

编程日记 2025/8/10 5:19:53

在登录页面上添加验证码

这是一个简单的登录页面，里面必须通过验证码通过之后才能够进入页面创建一个servlet（验证码的） package qcby.util;import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; im…...

编程日记 2025/6/29 3:30:28

人协同的自动化需求分析

多人协同的自动化需求分析是指通过技术工具和协作流程，让多个参与者（如产品经理、开发人员、测试人员等）在需求分析阶段高效协作，并借助自动化手段提升需求收集、整理、验证和管理的效率与质量。以下是其核心要点： 1. …...

编程日记 2025/8/10 4:20:36

C++使用PoDoFo库处理PDF文件

📚 PoDoFo 简介 PoDoFo 是一个用 C 编写的自由开源库，专用于读取、写入和操作 PDF 文件。它适用于需要程序化处理 PDF 文件的应用程序，比如批量生成、修改、合并、提取元数据、绘图等。 🌟 核心特点特性说明📄 P…...

编程日记 2025/8/2 16:04:50

18.Java 序列化与反序列化

18.Java 序列化与反序列化概述在Java中，序列化是将对象的状态信息转换为可以存储或传输的格式的过程，而反序列化则是将这种格式转换回Java对象的过程。序列化要使一个对象支持序列化，该对象必须实现java.io.Serializable接口。这个接…...

编程日记 2025/8/9 21:16:36

大语言模型主流架构解析：从 Transformer 到 GPT、BERT

📌 友情提示： 本文内容由银河易创AI（https://ai.eaigx.com）创作平台的gpt-4-turbo模型生成，旨在提供技术参考与灵感启发。文中观点或代码示例需结合实际情况验证，建议读者通过官方文档或实践进一步确认其准…...

编程日记 2025/8/10 3:11:34

flow-matching 之学习matcha-tts cosyvoice

文章目录 matcha 实现cosyvoice 实现chunk_fmchunk_maskcache_attn stream token2wav 关于flow-matching 很好的原理性解释文章， 值得仔细读，多读几遍，关于文章Flow Straight and Fast: Learning to Generate and Transfer Data with Rectifi…...

编程日记 2025/8/9 3:44:07

聊聊自动化办公未来趋势

1. 自动化办公未来趋势 1.1 智能化与AI融合加深随着人工智能技术的不断成熟，其在自动化办公中的应用将更加广泛和深入。未来，办公软件将具备更强的智能交互能力，能够理解自然语言指令，自动完成复杂的任务，如文档编辑…...

编程日记 2025/8/9 21:18:00

软件工程之需求分析涉及的图与工具

需求分析与规格说明书是一项十分艰巨复杂的工作。用户与分析员之间需要沟通的内容非常的多，在双方交流信息的过程中很容易出现误解或遗漏，也可能存在二义性。如何才能更加准确的表达双方的意思，且清楚明了，绘制各类图形就显得非常…...

编程日记 2025/8/11 16:44:43

火影bug，未保证短时间数据一致性，拿这个例子讲一下Redis

本文只拿这个游戏的bug来举例Redis，如果有不妥的地方，联系我进行删除描述：今天在高速上打火影（有隧道，有时候会卡），发现了个bug，我点了两次-1000的忍玉（大概用了1千七百…...

编程日记 2025/8/10 0:33:10

机器人领域和心理学领域恐怖谷是什么

机器人领域和心理学领域恐怖谷是什么恐怖谷是一个在机器人领域和心理学领域备受关注的概念，由日本机器人专家森政弘于1970年提出。含义当机器人与人类的相似度达到一定程度时，人类对它们的情感反应会突然从积极变为消极，产生一种毛骨悚然、厌恶恐惧的感觉。这种情感…...

编程日记 2025/8/13 6:30:25

Hadoop MapReduce 图文代码讲解

一、MapReduce原理首先要了解一下MapReduce的几个过程，每个数据集中需要编写的逻辑会有所不同，但是大致是差不多的 1、MapReduce大致为这几个过程： 1、读取数据集并根据文件大小128MB拆分成多个map同时进行下面步骤 2、Map: 匹配和数据筛…...

编程日记 2025/8/7 0:17:32

【Rust】结构体

目录结构体结构体的定义和实例化结构体使用场景方法定义方法多参数方法关联函数多个 impl 块结构体结构体，是一个自定义数据类型，允许包装和命名多个相关的值，从而形成一个有意义的组合，类似于 C语言中的结构体或者 Java 中的…...

编程日记 2025/6/29 2:19:40

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备

青少年编程与数学 02-019 Rust 编程基础 01课题、环境准备一、Rust核心特性应用场景开发工具社区与生态二、Rust 和 Python 比较1. **内存安全与并发编程**2. **性能**3. **零成本抽象**4. **跨平台支持**5. **社区与生态系统**6. **错误处理**7. **安全性**适用场景总结三、…...

编程日记 2025/8/13 13:24:17

深入理解Embedding Models（嵌入模型）：从原理到实战（上）

🐇明明跟你说过：个人主页 🏅个人专栏：《深度探秘：AI界的007》 🏅 🔖行路有良友，便是天堂🔖 目录一、引言 1、嵌入模型是什么 2、在NLP、推荐系统、知识图谱等领域…...

编程日记 2025/6/29 4:20:16

世界耳机品牌与排名

耳机可以说是日常用的比较多的产品之一，而且现在的耳机相较于传统的耳机还多了很多的功能，比如现在经常开车的人实用的蓝牙耳机，虽然日常用的多，那么你知道全球知名的耳机品牌有哪些吗？ 拜亚耳机，德国品牌&…...

编程日记 2025/7/31 9:25:11

防静电地板人工费多少钱一平方米？2025年报价解析！

在机房、实验室、数据中心等专业场所，防静电地板是保障设备正常运行的关键“防线”。但很多人在装修时，面对“防静电地板安装人工费”的报价往往一头雾水——有的报25元/㎡，有的却要50元/㎡，差价背后究竟藏着什么门道？…...

编程日记 2025/7/26 15:02:44

【详细图文】使用MobaXterm的SSH功能远程连接服务器，并创建pytorch环境，使用yolov8训练数据集

目录一、使用MobaXterm连接服务器 1、官网下载MobaXterm 2、SSH连接服务器二、查看服务器的基本信息 1、查看服务器基本信息（可选）（1）查看主机名和系统版本（2）查看CPU信息（3）查看内存信息（4）查看网卡信息（5）查看总进程数（6）查看活动进程数（…...

编程日记 2025/8/10 4:40:07

路由器断流排查终极指南：从Ping测试到Wireshark抓包5步定位法

测试路由器是否出现“断流”（网络连接间歇性中断），需通过多维度排查硬件、软件及外部干扰因素。以下是详细步骤指南： 一、基础环境准备设备连接有线测试：用网线将电脑直接连接路由器LAN口，排除WiFi干扰。…...

编程日记 2025/8/13 15:57:27

相关文章：