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

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

news 2025/10/29 20:53:16

一、方式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：使用form表单的形式（不推荐） 🌈1、前端代码：HTML文件 🌈2、后端代码：Calculator_form.java文件 🌈3、最终效果二、方式2：使用ajax形式（…...

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

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

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

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

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

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

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

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

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

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

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

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

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

asyncPool并发执行请求函数

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

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

Ubuntu 22.04上安装NFS服务

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

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

数据结构--双链表

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

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

javassist 动态修改 jar 包中 class

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

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

什么是CC攻击？

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

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

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

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

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

ChatGPT实战：生成演讲稿

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

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

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

1. 部署环境主机（条件说明） 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，您需要在Web服务器上进行以下配置： 在Web服务器上安装SSL证书。打开Web服务器配置文件（如Apache的httpd.conf或Nginx的nginx.conf）。找到监听HTTP请求的端口（通常是80端口）。…...

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

重新初始化k8s集群

执行如下命令，所有节点都执行 kubeadm reset初始化集群，仅在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发布博客文章宣布，本周所有基于IntelliJ的IDE和.NET工具的EAP版本都将具备AI助手功能。而这些操作或许将提高开发效率，并且这些AI助手也是使用自家的**ERP**模型和OpenAI服务。 JetBrains表示，当下AI助手功能主要体现在IDE的两…...

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

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

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

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

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

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

编程日记 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命令行执行： adb devices 如果没有显示device信息，请检查： 手机是否开启usb调…...

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

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子&#xff08…...

编程新知 2025/10/29 8:59:38

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明在2011版本的gb28181协议中，拉取视频流只要求udp方式，从2016开始要求新增支持tcp被动和tcp主动两种方式，udp理论上会丢包的，所以实际使用过程可能会出现画面花屏的情况，而tcp肯定不丢包，起码…...

编程新知 2025/10/28 21:32:08

大学生职业发展与就业创业指导教学评价

这里是引用作为软工2203/2204班的学生，我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要，而您认真负责的教学态度，让课程的每一部分都充满了实用价值。尤其让我…...

编程新知 2025/10/6 22:42:00

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/10/29 4:49:49

Mysql8 忘记密码重置，以及问题解决

1.使用免密登录找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

编程新知 2025/9/12 22:46:10

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的，可以通过集中管理和高效资源的分配，来支持多个独立的网站同时运行，让每一个网站都可以分配到独立的IP地址，避免出现IP关联的风险，用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

【JVM】Java虚拟机（二）——垃圾回收

目录一、如何判断对象可以回收 （一）引用计数法 （二）可达性分析算法二、垃圾回收算法 （一）标记清除 （二）标记整理 （三）复制 （四&#xff…...

编程新知 2025/10/27 13:40:32

Unity UGUI Button事件流程

场景结构测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...

编程新知 2025/10/19 19:14:34