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

JavaEE(2)：前后端项目之间的交互

news 2026/4/10 6:34:10

现在，在网页中通过超链接，表单就可以向后端发送请求，后端也可以正常响应内容。

以前通过表单访问后端的请求方式称为同步请求

同步请求

        当网页与后端交互时，前端不能再进行其他操作

        服务器端响应回来的内容，会把整个浏览器的内容覆盖掉

        这种请求方式在前后端交互时，就不太友好了

        现在的前后端交互请求，都是使用的是异步请求

举例说明：

前端注册网页(实现同步请求)：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script>function checkAccount(account){//同步请求，已经被抛弃了location.href = "http://127.0.0.1:8088/dormServer/register?account="+account;}function relogin(){location.href = "http://127.0.0.1:8848/webtest/login.html";}</script></head><body><form method="post">账号:<input type="text" name="account" value="" onblur="checkAccount(this.value)"/> <span id="msgid"></span><br/>密码:<input type="password" name="password" value=""/> <br/><input type="button" value="提交" onclick="relogin()"/></form></body>
</html>

        在注册界面输入好账号(已存在)后：

        

        当鼠标焦点不在账号栏时：

页面直接被响应到的信息覆盖了，后续操作无法进行。所以同步请求就被无情抛弃了~

异步请求

    同时可以做多件事情(前端与服务器交互时，不影响前端网页其他操作)

        使用js中提供的XMLHttpRequest对象实现发送异步请求，和接收服务器响应

        异步请求时，会出现跨域访问问题：浏览器默认不允许js对象接收来自其他服务器响应的内容。

举例说明：

        将前端网页的方法中将异步代码实现：

function checkAccount(account){//异步请求，使用js对象发送请求var httpobj = new XMLHttpRequest();//封装请求地址和数据httpobj.open("get","http://127.0.0.1:8088/dormServer/register?account="+account,true);//发送请求httpobj.send();//接收响应httpobj.onreadystatechange = function(){//httpobj.responseText;  获得到响应的内容document.getElementById("msgid").innerHTML = httpobj.responseText;}}

在注册界面输入好账号(已存在)后：

当鼠标焦点不在账号栏时，从后端响应回来的信息就会立刻附在账号栏后反馈给用户。

        但如果有很多种需要实时为用户反馈信息的话，这种异步请求的实现代码就非常繁琐，在多个前端网页也显得非常冗余。

        所以就有了axios框架去封装异步请求的代码，减少了代码的冗余。

axios

    axios 是一个HTTP 的网络请求库.

       <!-- 导入axios框架 -->
        <script src="js/axios.min.js"></script>

        然后注册网页的前端方法中的异步请求就会变成

function checkAccount(account){//axios框架对异步请求进行封装axios.get("http://127.0.0.1:8088/dormServer/register?account="+account).then((resp)=>{console.log(resp);document.getElementById("msgid").innerHTML = resp.data;//resp.data取出后端响应的内容});}

        极大减少了代码的数量，增加了代码的观赏性。

跨域问题

不同服务之间进行访问

只要请求协议，域名，端口其中一项不同，就属于跨域访问

在后端过滤器中响应时，告知前端本次响应是安全的，允许跨域访问

跨域问题是一个前端问题，也可以在后端解决，也可以在前端解决

        配置跨域过滤器

public class CorsFilter implements Filter {public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)throws IOException, ServletException {HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;//允许携带Cookie时不能设置为* 否则前端报错httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//"origin"允许所有请求跨域,前期都是自己的浏览器访问自己的服务器，也可以使用回环地址httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookiefilterChain.doFilter(servletRequest, servletResponse);}
}

 在web.xml文件中配置注册跨域过滤器

<!--配置允许跨域过滤器--><filter><filter-name>corsfilter</filter-name><filter-class>com.ffyc.dormServer.filter.CorsFilter</filter-class></filter><filter-mapping><filter-name>corsfilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

json

        json javaScript object Notation javaScript对象表示法

        两种不同的语言之间如何进行数据交互(例如C语言程序 与 java程序之间要进行数据交互)

        json是一种公认的js识别的对象表示法，对于java而言就是一种特定格式的字符串

        对象：{键:值,键:值} 例如：{name:jim,age:20} 集合：[{键:值,键:值}，{键:值,键:值}]

模拟json转换数据格式

        1、写一个SearchServlet类

public class SearchServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String name = req.getParameter("name");//模拟从数据库根据名字查询学生所有信息，然后叫数据封装到一个学生对象中Student student = new Student();student.setNum(101);student.setName(name);student.setGender("男");student.setAge(20);PrintWriter printWriter = resp.getWriter();ObjectMapper objectMapper = new ObjectMapper();String jsonstr = objectMapper.writeValueAsString(student);printWriter.print(jsonstr);//打印响应一个学生对象}

        2、在web.xml文件中配置 SearchServlet

<servlet><servlet-name>search</servlet-name><servlet-class>com.ffyc.dormServer.web.SearchServlet</servlet-class></servlet><servlet-mapping><servlet-name>search</servlet-name><url-pattern>/search</url-pattern></servlet-mapping>

        在前端写一个search.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- 导入axios框架 --><script src="js/axios.min.js"></script><script>function search(){var name = document.getElementById("nameid").value;axios.get("http://127.0.0.1:8088/dormServer/search?name="+name).then((resp)=>{if(resp.data.code == 200){console.log(resp.data);alert(resp.data.massage);document.getElementById("numid").innerHTML = resp.data.data.num;document.getElementById("nameid1").innerHTML = resp.data.data.name;document.getElementById("genderid").innerHTML = resp.data.data.gender;document.getElementById("ageid").innerHTML = resp.data.data.age;}else if(resp.data.code == 500){alert(resp.data.massage);}});}</script></head><body><input type="text" id="nameid"/><input type="button" value="搜索" onclick="search()"/><div>学号：<span id="numid"></span>姓名：<span id="nameid1"></span>性别：<span id="genderid"></span>年龄：<span id="ageid"></span></div></body>
</html>

测试json：

    打开search网页

    输入张三后，后端的json就将从数据库得到的信息，转换成json的数据格式响应回前端并显示上去

相关文章：

JavaEE(2)：前后端项目之间的交互

现在&#xff0c;在网页中通过超链接&#xff0c;表单就可以向后端发送请求&#xff0c;后端也可以正常响应内容。 以前通过表单访问后端的请求方式称为同步请求 同步请求 当网页与后端交互时&#xff0c;前端不能再进行其他操作 服务器端响应回来的内容&#xff0c;会把整个浏…...

编程日记 2024/9/6 2:24:30

（已开源-CVPR 2024）YOLO-World: Real-Time Open-Vocabulary Object Detection

169期《YOLO-World Real-Time Open-Vocabulary Object Detection》 You Only Look Once (YOLO) 系列检测模型是目前最常用的检测模型之一。然而&#xff0c;它们通常是在预先定义好的目标类别上进行训练&#xff0c;很大程度上限制了它们在开放场景中的可用性。为了解决这一限制…...

编程日记 2024/9/6 2:23:26

Spring6梳理4——SpringIoC容器

以上笔记来源&#xff1a; 尚硅谷Spring零基础入门到进阶&#xff0c;一套搞定spring6全套视频教程&#xff08;源码级讲解&#xff09;https://www.bilibili.com/video/BV1kR4y1b7Qc 目录 4.1 前言 4.2 IoC容器 4.2.1 控制反转(IoC) 4.2.2 依赖注入 4.2.3 IoC容器在Spri…...

编程日记 2024/9/6 2:22:24

SpringBoot2：请求处理原理分析-FORM表单请求接口

一、RESTFUL简介 Rest风格支持&#xff08;使用HTTP请求方式&#xff0c;动词来表示对资源的操作&#xff09; 以前&#xff1a;/getUser 获取用户 /deleteUser 删除用户 /editUser 修改用户 /saveUser 保存用户 现在&#xff1a; /user GET-获取用户 DELETE-删除用户 PUT-修改…...

编程日记 2024/9/6 2:19:19

Monkey日志ANR、CRASH、空指针异常及其他异常数据分析

引言 在Android开发过程中&#xff0c;monkey测试是一种常用的随机测试手段&#xff0c;用于模拟用户的各种操作来发现应用中的稳定性问题。通过monkey测试生成的日志文件包含了丰富的信息&#xff0c;包括应用程序崩溃&#xff08;Crash&#xff09;、无响应&#xff08;ANR&…...

编程日记 2024/9/6 2:17:17

Vue 3结合Element Plus中，实现一个级联选择器（Cascader）来展示省市区

在Vue 3结合Element Plus中&#xff0c;实现一个级联选择器&#xff08;Cascader&#xff09;来展示省市区&#xff08;甚至到更细分的级别&#xff0c;如街道、小区等&#xff09;的联动选择是一个常见的需求。Element Plus的Cascader组件非常适合这样的场景&#xff0c;因为它…...

编程日记 2024/9/6 2:16:15

使用卫星仿真软件STK的一些应用和思考（星地链路、星间链路）

目录 任务描述利用STK建模星地协同系统3个GEO高轨卫星240/20/1 Walker-Star Constellation 低轨卫星星座地面站或者地面设备 链路建模与数据提取处理星地链路星间链路数据读取的几种方法最麻烦的方法使用Matlab与STK互联接口使用大规模使用Chain 总结 任务描述 在一个星地协同…...

编程日记 2024/9/6 2:12:11

pytorch对不同的可调参数，分配不同的学习率

在 PyTorch 中&#xff0c;你可以通过为优化器传递不同的学习率来针对不同的可调参数分配不同的学习率。这通常通过向优化器传递一个字典列表来实现&#xff0c;其中每个字典指定特定参数组的学习率。下面是一个示例代码&#xff0c;展示了如何实现这一点&#xff1a; import …...

编程日记 2024/9/6 2:11:10

零基础学习Python（八）—— time模块、request模块、数据分析和自动化办公相关模块、jieba模块、文件操作和os相关模块的简单介绍

1. time模块 time()&#xff1a;获取当前时间戳&#xff0c;是一个数字 localtime()&#xff1a;返回一个time.struct_time对象&#xff0c;里面有年月日时分秒&#xff0c;还有星期几&#xff08;0表示星期一&#xff09;和今年的第几天 import timeprint(time.time()) pri…...

编程日记 2024/9/6 2:09:06

快速回顾-HTML5

HTML5-常用的标签&#xff1a;https://blog.csdn.net/TKOP_/article/details/111395865 <!-- HTML5:声明文档类型的标签 --> <!DOCTYPE html><!-- 用于声明网页的主要语言为简体中文 --> <!-- 帮助搜索引擎、浏览器等理解网页的语言内容&#xff0c;以便…...

编程日记 2024/9/6 2:08:05

视频技术未来展望：EasyCVR如何引领汇聚融合平台新趋势

随着科技的飞速发展&#xff0c;视频技术已成为现代社会不可或缺的一部分&#xff0c;广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。本文将探讨视频技术的未来发展趋势&#xff0c;并深入分析TSINGSEE青犀EasyCVR视频汇聚融合平台的技术优势&#xff0c;展现其…...

编程日记 2024/9/6 2:03:52

7个流行的开源数据治理工具

数字化时代&#xff0c;数据是已经成为最宝贵的资产之一。数据支撑着我们的政府、企业以及各类组织的所有流程&#xff0c;并为决策以及智能化服务提供支撑。大数据有大用途&#xff0c;但是也可能隐藏着巨大的风险&#xff0c;特别是如果我们对数据的情况不是很了解的时候&…...

编程日记 2024/9/6 2:02:42

js | XMLHttpRequest

是什么&#xff1f; 和serve交互数据的对象&#xff1b;能够达到页面部分刷新的效果&#xff0c;也就是获取数据之后&#xff0c;不会使得整个页面都刷新&#xff1b;虽然名字是XML&#xff0c;但不限于XML数据。 怎么用&#xff1f; function reqListener() {console.log(thi…...

编程日记 2024/9/6 2:01:38

2024国赛数学建模A题思路模型代码

2024国赛数学建模思路资料&#xff0c;思路获取见文末名片 数学建模感想 纪念逝去的大学数学建模&#xff1a;两次校赛&#xff0c;两次国赛&#xff0c;两次美赛&#xff0c;一次电工杯。从大一下学期组队到现在&#xff0c;大三下学期&#xff0c;时间飞逝&#xff0c;我的…...

编程日记 2024/9/6 1:59:35

使用SVD（奇异值分解）进行降维的奇妙之旅

在数据分析和机器学习的广阔天地中&#xff0c;降维技术占据着举足轻重的地位。当我们面对高维数据时&#xff0c;不仅计算成本高昂&#xff0c;而且容易遭遇“维度灾难”&#xff0c;即随着维度的增加&#xff0c;数据的稀疏性和距离度量失效等问题愈发严重。为了克服这些挑战…...

编程日记 2024/9/6 1:58:34

【C++ 第二十一章】特殊类的设计（学习思路）

1.请设计一个类&#xff0c;不能被拷贝 设计思路 拷贝只会使用在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 C98 的做法 将拷贝构造函数与赋值运算符…...

编程日记 2024/9/6 1:57:33

Java设计模式【命令模式】-行为型

1. 介绍 命令模式&#xff08;Command Pattern&#xff09; 是一种行为型设计模式&#xff0c;它将一个请求封装为一个对象&#xff0c;从而使我们可以用不同的请求对客户端进行参数化&#xff0c;并且支持请求的排队、记录日志以及撤销、重做等功能。命令模式将请求的发送者与…...

编程日记 2024/9/6 1:56:22

【HarmonyOS】一键扫码功能

【HarmonyOS】一键扫码功能 前言 鸿蒙在api10之后&#xff0c;对系统api的基础上&#xff0c;封装了较为复杂功能的开发工具包&#xff0c;统一称之为Kit。这些Kit根据功能定义的不同&#xff0c;划分为不同的种类Kit。如下图所示&#xff1a; 其实可以理解为集成在系统中的…...

编程日记 2024/9/6 1:55:21

Spring Boot应用中集成与使用多数据源

Spring Boot应用中集成与使用多数据源 1. 前言 通过定义和使用多个数据源&#xff0c;能在Spring Boot应用中实现更复杂的数据管理场景&#xff0c;比如读写分离、数据冗余等。 2. 准备工作 环境准备&#xff1a;确保已经准备好Spring Boot的开发环境。数据库准备&#xff…...

编程日记 2024/9/6 1:54:20

探索 JavaScript 中的 instanceof 关键字

在 JavaScript 这门灵活而强大的编程语言中&#xff0c;instanceof 是一个非常重要的操作符&#xff0c;它用于检测一个对象是否在其原型链的原型构造函数的 prototype 属性中出现。简而言之&#xff0c;instanceof 用于测试一个对象是否是其父类或者其原型链上某个构造函数的实…...

编程日记 2024/9/6 1:53:15

计算机毕业设计：Python全国天气数据可视化与预测系统 Django框架 可视化 随机森林 爬虫 中国天气网 机器学习 深度学习（建议收藏）✅

1、项目介绍 技术栈 采用 Python 语言开发&#xff0c;基于 Django 框架搭建后端服务&#xff0c;使用 MySQL 数据库进行数据存储&#xff0c;通过 requests 爬虫技术从中国天气网采集历史天气数据&#xff0c;前端利用 Echarts 实现数据可视化展示&#xff0c;并运用机器学习…...

编程新知 2026/4/10 6:23:28

OpenClaw浏览器自动化：Qwen3.5-9B爬取带图片的学术资料

OpenClaw浏览器自动化&#xff1a;Qwen3.5-9B爬取带图片的学术资料 1. 为什么需要自动化学术资料采集 上周我在研究量子计算的最新进展时&#xff0c;遇到了一个典型痛点&#xff1a;需要在十几个学术平台手动翻页、下载PDF、截图关键图表&#xff0c;再手工整理参考文献。这…...

编程新知 2026/4/10 3:51:31

工商业储能柜的 OEM 定制需要关注哪些关键指标？

“同一款工商业储能柜&#xff0c;为什么不同工厂的报价差异能达到 30%&#xff1f;” 这是不少储能贸易商在筛选供应商时遇到的典型问题。随着国内峰谷电价差持续拉大&#xff0c;工商业储能需求快速释放&#xff0c;但面对市场上五花八柜的产品方案&#xff0c;贸易商往往难以…...

编程新知 2026/4/10 2:46:06

可口可乐在美国250周年庆活动中唱响“我想给美国买瓶可乐”

可口可乐公司正式启动一项为期一年的全国性营销活动&#xff0c;以配合其与“美国250周年委员会&#xff08;America250&#xff09;”的合作伙伴关系。该委员会是负责筹备美国建国250周年庆典的非营利组织。 活动核心是一支三分钟的赞歌式视频《畅饮美国&#xff08;Drink In…...

编程新知 2026/4/10 2:05:04

嵌入式系统开发：硬件思维与架构实践

1. 嵌入式领域的技术特性解析嵌入式系统开发与传统软件工程存在本质差异。在资源受限的硬件环境中&#xff0c;开发者往往需要直接操作寄存器、管理内存分配、处理中断服务例程。这种"贴近金属"的开发方式&#xff0c;决定了嵌入式工程师必须具备硬件思维。以STM32系…...

编程新知 2026/4/10 1:23:39

GLM技术复盘：篇论文深度解读智谱模型家族菏

开发个什么Skill呢&#xff1f; 通过 Skill&#xff0c;我们可以将某些能力进行模块化封装&#xff0c;从而实现特定的工作流编排、专家领域知识沉淀以及各类工具的集成。 这里我打算来一次“套娃式”的实践&#xff1a;创建一个用于自动生成 Skill 的 Skill&#xff0c;一是用…...

编程新知 2026/4/10 1:19:38

金融PHP支付代码审计清单（含OWASP ASVS 4.0对标项）：27个必查风险点，附自动化检测脚本

第一章&#xff1a;金融PHP支付接口安全代码审计导论金融级PHP支付接口是资金流转的核心通道&#xff0c;其安全性直接关系到用户资产、商户信誉与平台合规性。不同于通用Web应用&#xff0c;支付接口需同时满足PCI DSS基础要求、中国《金融行业网络安全等级保护基本要求》&…...

编程新知 2026/4/10 0:16:39

三三学习_一些你不知道的事

特征 去中心化Decentralization 核心原則 信息分散存储&#xff0c;数据不再受科技巨企控制降低审查风险、拒绝服务&#xff08;DoS&#xff09;攻击的有效性保护个人用户的隐私数据甚至保留所有权 去信任化及无权限化Trustless and Permissionless 哎、上面刚说所有权&am…...

编程新知 2026/4/9 23:25:43

Hypersistence Utils标识符生成器完全教程：BatchSequence、TSID和SequenceOptimizer

Hypersistence Utils标识符生成器完全教程&#xff1a;BatchSequence、TSID和SequenceOptimizer 【免费下载链接】hypersistence-utils The Hypersistence Utils library (previously known as Hibernate Types) gives you Spring and Hibernate utilities that can help you g…...

编程新知 2026/4/9 23:14:44

FastAPI单元测试实战：别等上线被喷才后悔，TestClient用对了真香！芯

正文 异步/等待解决了什么问题&#xff1f; 在传统同步I/O操作中&#xff08;如文件读取或Web API调用&#xff09;&#xff0c;调用线程会被阻塞直到操作完成。这在UI应用中会导致界面冻结&#xff0c;在服务器应用中则造成线程资源的浪费。async/await通过非阻塞的异步操作解…...

编程新知 2026/4/9 22:59:56