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

【Servlet学习三】实现一个内存版本的简易计算器~

news 2026/2/9 0:12:49

目录

一、方式1：使用form表单的形式（不推荐）

🌈1、前端代码：HTML文件

🌈2、后端代码：Calculator_form.java文件

🌈3、最终效果

二、方式2：使用ajax形式（最常用&&重点！！！）

🌈1、前端代码：HTML文件

🌈2、后端代码：Calculator_ajax.java文件

🌈3、最终效果

一、方式1：使用form表单的形式（不推荐）

🌈1、前端代码：HTML文件

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>计算器-form表单提交</title>
</head>
<body><form method="get" action="calculator"><div style="margin-top:50Px;margin-left:40%"><h2>计算器</h2><!-- id是给js用的，name是form表单提交时给后端用得，等于后端的key值-->数值1: <input id="num1" name = "num1"><p></p>数值2: <input id="num2" name = "num2"><p></p><!-- submit是给form表单用的,ajax用button--><input type = "submit" value="相加"></div></form>
</body>
</html>

🌈2、后端代码：Calculator_form.java文件

//2、创建路由
@WebServlet("/calculator_form")
//1、创建类，继承HttpServlet
public class Calculator_form extends HttpServlet {/*** 目标：从前端拿两个参数：num1和num2，进行相加操作并将结果返回给前端* @param req* @param resp* @throws ServletException* @throws IOException*///生成doPost或者doGet方法@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}//重写doPost方法@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//0、设置返回的数据类型和编码req.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=utf-8");//1、从请求req中获取参数num1String num1 = req.getParameter("num1");String num2 = req.getParameter("num2");//2、参数的合法性校验if(num1==null || num1.equals("") || num2==null || num2.equals("")){//直接返回错误信息resp.getWriter().write("抱歉，参数有误");return;}//3、进行类型转换String-intint number1 = Integer.valueOf(num1);int number2 = Integer.valueOf(num2);//4、计算相加的结果int res = number1+number2;//5、将计算结果返回给前端resp.getWriter().write("相加结果："+res);}
}

 注意：

（1）前端代码中，id是给js用的，name是form表单提交时给后端用得，要设置name属性。

（2）后端代码中：设置的编码格式是html

🌈3、最终效果

运行代码，获取URL地址，在网页打开.html文件地址

方式1：存在问题：

        计算完之后，不能再进行下一次操作了，因为采用的是form表单的提交，form表单的提交是全部提交，将之前的页面一起提交了，只能计算一次，因此并不适用现实，实际中我们采用的是局部提交的技术，也就是ajax技术，见方式2。

方式2目标：

        方式1点击提交之后，将结果显示在按钮下方，页面保持不变，方便进行下一次操作。

二、方式2：使用ajax形式（最常用&&重点！！！）

🌈1、前端代码：HTML文件

这里使用jQuery的方式，因此首先要将jQuery引入到html文件中。

        jQuery有一个方法叫ajax，当获取到数值不为空的时候，就发送ajax到后端，前端与后端实现交互，就是 ajax实现。因此我要在ajax方法里面设置：我要提交到哪个URL里面?我要传递的参数是什么？最后返回了结果我要怎么去处理这个结果?因为是多个值，所以使用json的形式来传递，用{}实现。

🍈 最终完整html文件代码如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>计算器-ajax局部提交</title><!-- 使用jquery方式进行ajax --><!-- 在当前项目中引入jquery--><script src = "jquery.min.js"></script>
</head>
<body><div style="margin-top:50Px;margin-left:40%"><h2>计算器</h2><!-- id是给js用的，name是form表单提交时给后端用得，等于后端的key值-->数值1:<input id="num1" name = "num1"><p></p>数值2:<input id="num2" name = "num2"><p></p><!-- submit是给form表单用的,ajax用button--><!--        -------------------显示函数没有被定义-----------------------执行并不成功--><input type = "button" value="相加" onclick="mysub()"></div><script>// 实现按钮的函数function mysub(){//1、获取控件，进行非空校验var num1 = jQuery("#num1");var num2 = jQuery("#num2");//2、非空校验//没有输入任何信息if(num1.val().trim() == ""){//.trim()是去空格alert("抱歉，请先输入数值！");num1.focus();return false;}if(num2.val().trim() == ""){alert("抱歉，请先输入数值！");num1.focus();return false;}//3、发送ajax到后端:ajax是一个方法//需要设置：我要提交到哪个URL里面，我要传递的参数是什么，还有最终返回结果了我要怎么取处理。//多个值，所以用Json格式实现jQuery.ajax({url:"calculator_ajax",//请求地址method:"get",//请求方法类型--大小写都可以data:{//请求数据"num1":num1.val(),"num2":num2.val()},//success是一个方法，前面三个都是属性；这个方法接收了一个返回的参数，//返回的参数用res对象接收(名字是什么无所谓，反正是后端返回给前端的一个参数)success:function(res){//规定后端发送给前端的是一个Json格式的数据{"code":200,"msg":"描述","data":xxx}if(res.code == 200 && res.data == 1){alert("计算的结果是："+res.data);}else{alert("操作失败！"+res.msg);}}});           }</script>
</body>
</html>

🌈2、后端代码：Calculator_ajax.java文件

注意点1：URL要对应

 注意点2：编码格式

 注意点3：学会Json的简单使用：objectMapper

        (下面用的HashMap，乱序，但不影响结果，只要最后有着三个属性值就好了；如果要保证有序性，用LinkedHashMap就行)。

🍈最终后端代码实现：Calculator_ajax.java文件

import com.fasterxml.jackson.databind.ObjectMapper;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.HashMap;
import java.util.LinkedHashMap;/*** ajax版本*/
@WebServlet("/calculator_ajax")
public class Calculator_ajax extends HttpServlet {//定义成类属性，且不能被修改private final ObjectMapper objectMapper = new ObjectMapper();@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req,resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//-------------------------与form形式的不同点1--------------------------//0、设置返回的数据类型和编码：设置为json格式req.setCharacterEncoding("UTF-8");resp.setContentType("application/json;charset=utf-8");//1、从请求req中获取参数num1String num1 = req.getParameter("num1");String num2 = req.getParameter("num2");//2、参数的合法性校验if(num1==null || num1.equals("") || num2==null || num2.equals("")){//直接返回错误信息resp.getWriter().write("抱歉，参数有误");}//3、进行类型转换String-intint number1 = Integer.valueOf(num1);int number2 = Integer.valueOf(num2);//4、计算相加的结果int res = number1+number2;//---------------与form形式的不同点2-----------------------//5、返回json格式的对象//方式1：直接拼:要使用转义字符(不推荐，容易出错)
//        String jsonRes = "{\"code\":200, \"msg\":\"\", \"data\":"+res+"}";
//        resp.getWriter().write(jsonRes);//方式2：json工具：将一个字符串转为对象，或者将一个对象转为json字符串LinkedHashMap<String,Object> map = new LinkedHashMap<String, Object>();map.put("code",200);map.put("msg","成功");map.put("data",res);//返回结果String jsonStr = objectMapper.writeValueAsString(map);resp.getWriter().write(jsonStr);}
}

🌈3、最终效果

注意：如果出错了，F12打开控制台看报错信息。

 然后，我们也可以对上述操作用Fiddler进行抓包观察，同样结果显示是12。

 

相关文章：

【Servlet学习三】实现一个内存版本的简易计算器~

目录 一、方式1&#xff1a;使用form表单的形式&#xff08;不推荐&#xff09; &#x1f308;1、前端代码&#xff1a;HTML文件 &#x1f308;2、后端代码&#xff1a;Calculator_form.java文件 &#x1f308;3、最终效果 二、方式2&#xff1a;使用ajax形式&#xff08;…...

编程日记 2023/6/30 23:26:57

Linux c语言获取本机网关 ip 地址

文章目录 前言一、获取本机网关 ip 地址1.1 代码示例1.2 代码详解介绍 二、使用Netlink套接字实时监控网络事件2.1 简介2.2 示例代码 前言 这篇文章写了获取本机的ip地址和子网掩码&#xff1a;Linux c语言获取本机 ip、子网掩码 一、获取本机网关 ip 地址 使用Netlink套接字…...

编程日记 2023/6/30 22:53:35

nginx部署本地项目如何让异地公网访问？服务器端口映射配置！

接触过IIS或apache的小伙伴们&#xff0c;对nginx是比较容易理解的&#xff0c;nginx有点类似&#xff0c;又有所差异&#xff0c;在选择使用时根据自己本地应用场景来部署使用即可。通过一些对比可能会更加清楚了解&#xff1a; 1.nginx是轻量级&#xff0c;比apache占用更少…...

编程日记 2023/6/30 22:20:13

云时代已至，新一代数据分析平台是如何实现的？

2023 年 5 月&#xff0c;由 Stackoverflow 发起的 2023 年度开发者调查数据显示&#xff0c;PostgreSQL 已经超越 MySQL 位居第一&#xff0c;成为开发人员首选。PostgreSQL 在国内的热度也越来越高。6 月 17 日&#xff0c;PostgreSQL 数据库技术峰会在成都顺利召开。本次大会…...

编程日记 2023/6/30 21:46:52

【C#】简单聊下Framework框架下的事务

框架用的多了&#xff0c;之前版本的事务都忘记了。本次简单聊下.net framework 4.8框架下本身的事务 目录 1、SqlClient2、TransactionScope3、引用 1、SqlClient 在 C# 中&#xff0c;使用 using 块可以方便地实现对资源的自动释放&#xff0c;但它不适用于实现事务处理。为…...

编程日记 2023/6/30 20:40:09

asyncPool并发执行请求函数

asyncPool应用场景 一个不太常见的极端场景&#xff0c;当我们为了某个操作需要发生异步请求的时候&#xff0c;等待所有异步请求都完成时进行某些操作。这个时候我们不在简简单单的发送 1 - 2 个请求而是 5 - 10个&#xff08;其实极端场景式 很多很多个请求&#xff0c;这个…...

编程日记 2023/6/30 20:06:48

Ubuntu 22.04上安装NFS服务

1、使用如下命令安装NFS服务端软件&#xff1a; # 在主机上运行以下命令 orangepiorangepi5:~$ sudo apt install nfs-server 2、在配置NFS时需要使用用户uid和组gid&#xff0c;可以使用id命令查看 # 在主机上运行id命令 orangepiorangepi5:~$ id uid1000(orangepi) gid100…...

编程日记 2023/6/30 19:33:27

数据结构--双链表

数据结构–双链表 单链表 VS 双链表 单链表&#xff1a;无法逆向检索&#xff0c;有时候不太方便 双链表&#xff1a;可进可退&#xff0c;存储密度更低一丢丢 双链表的定义 typedef struct DNode {ElemType data;struct DNode *prior, *next; }DNode, *DLinkList;双链表的初…...

编程日记 2023/6/30 19:00:05

javassist 动态修改 jar 包中 class

Javassist&#xff08;Java Programming Assistant&#xff09;是一个用于在运行时操作字节码的库&#xff0c;它可以用于动态修改和操作Java类。使用Javassist&#xff0c;可以通过修改现有的类或创建新的类来实现动态修改Jar包中的类。 下面是一个简单的示例&#xff0c;展示…...

编程日记 2023/6/30 18:26:44

什么是CC攻击？

CC攻击&#xff1a;DDOS(分布式拒绝服务攻击)的一种。黑客利用代理服务器或者控制的肉鸡&#xff0c;向目标web网页发送大量的请求&#xff0c;致使CPU处理不过来这么多的请求&#xff0c;长期处于100%的状态。造成通过该页面访问的端口堵塞&#xff0c;正常请求进不来。 怎么…...

编程日记 2023/6/30 17:53:23

​LeetCode解法汇总253. 重构 2 行二进制矩阵

目录链接&#xff1a; 力扣编程题-解法汇总_分享记录-CSDN博客 GitHub同步刷题项目&#xff1a; https://github.com/September26/java-algorithms 原题链接&#xff1a;力扣 描述&#xff1a; 给你一个 2 行 n 列的二进制数组&#xff1a; 矩阵是一个二进制矩阵&#xff0…...

编程日记 2023/6/30 17:20:02

ChatGPT实战：生成演讲稿

当众发言&#xff08;演讲&#xff09;是一种传达信息、观点和情感的重要方式。通过演讲&#xff0c;人们可以在公共场合表达自己的观点&#xff0c;向观众传递自己的知识和经验&#xff0c;激发听众的思考和行动。无论是商务演讲、学术讲座还是政治演说&#xff0c;演讲稿的写…...

编程日记 2023/6/30 16:46:41

在线搭建K8S,kubernetes集群v1.23.9,docker支持的最后一个版本

1. 部署环境主机&#xff08;条件说明&#xff09; master 192.168.186.128 CentOS Linux release 7.9.2009 (Core) node1 192.168.186.129 CentOS Linux release 7.9.2009 (Core) node2 192.168.186.130 CentOS Linux release 7.9.2009 (Core)2. 系统初始化-所有节点&am…...

编程日记 2023/6/30 16:13:20

http自动跳转https的配置方法

要将HTTP自动重定向到HTTPS&#xff0c;您需要在Web服务器上进行以下配置&#xff1a; 在Web服务器上安装SSL证书。 打开Web服务器配置文件&#xff08;如Apache的httpd.conf或Nginx的nginx.conf&#xff09;。 找到监听HTTP请求的端口&#xff08;通常是80端口&#xff09;。…...

编程日记 2023/6/30 15:39:58

重新初始化k8s集群

执行如下命令&#xff0c;所有节点都执行 kubeadm reset初始化集群&#xff0c;仅在master(centos01)上执行 [rootcentos01 opt]# kubeadm init --apiserver-advertise-address 192.168.109.130 --image-repository registry.aliyuncs.com/google_containers --kubernetes-ve…...

编程日记 2023/6/30 15:06:37

JetBrains编程IDE将具备Ai助手功能，或将提高开发速度

近日JetBrains发布博客文章宣布&#xff0c;本周所有基于IntelliJ的IDE和.NET工具的EAP版本都将具备AI助手功能。而这些操作或许将提高开发效率&#xff0c;并且这些AI助手也是使用自家的**ERP**模型和OpenAI服务。 JetBrains表示&#xff0c;当下AI助手功能主要体现在IDE的两…...

编程日记 2023/6/30 14:33:15

【网络原理】TCP/IP协议五层模型

&#x1f94a;作者&#xff1a;一只爱打拳的程序猿&#xff0c;Java领域新星创作者&#xff0c;CSDN、阿里云社区优质创作者。 &#x1f93c;专栏收录于&#xff1a;计算机网络原理 本期讲解协议、OSI七层模型、TCP/IP五层模型、网络设备所在的分层、数据的封装和分佣。 目录 …...

编程日记 2023/6/30 13:59:54

【备战秋招】每日一题:2023.05.10-华为OD机试(第二题)-解密

为了更好的阅读体检&#xff0c;可以查看我的算法学习博客 在线评测链接:P1307 题目内容 在全球恐怖主义危机下&#xff0c;一组间谍团队接收到了来自地下工作者的一串神秘代码。这组代码可以帮助他们访问恐怖分子的服务器&#xff0c;但是他们需要先解密代码才能使用它。代…...

编程日记 2023/6/30 13:26:33

【华为OD机试】矩阵最大值（python, java, c++, js）

矩阵最大值 前言：本专栏将持续更新华为OD机试题目，并进行详细的分析与解答，包含完整的代码实现，希望可以帮助到正在努力的你。关于OD机试流程、面经、面试指导等，如有任何疑问，欢迎联系我，wechat：steven_moda；email：nansun0903@163.com；备注：CSDN。 题目描述 给定…...

编程日记 2023/6/30 12:53:12

通过USB和wifi连接真机编写第一个脚本

目录 一、连接手机 1、通过usb数据线连接手机 2、无线连接手机 二、编写第一个脚本 一、连接手机 1、通过usb数据线连接手机 数据线连接手机并允许调试 cmd命令行执行&#xff1a; adb devices 如果没有显示device信息&#xff0c;请检查&#xff1a; 手机是否开启usb调…...

编程日记 2023/6/30 12:19:51

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2026/2/8 21:59:25

css实现圆环展示百分比，根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

编程新知 2026/2/5 4:28:28

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Spring Boot 实现流式响应（兼容 2.7.x）

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

编程新知 2025/8/11 8:18:44

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2026/1/22 20:46:43

GitHub 趋势日报 (2025年06月08日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 884 cognee 566 dify 414 HumanSystemOptimization 414 omni-tools 321 note-gen …...

编程新知 2025/12/13 1:32:15

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01