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

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

news 2025/12/15 11:21:08

目录

一、方式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

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

编程新知 2025/12/14 9:58:13

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/12/11 20:28:10

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/12/9 3:13:43

Nginx server_name 配置说明

Nginx 是一个高性能的反向代理和负载均衡服务器&#xff0c;其核心配置之一是 server 块中的 server_name 指令。server_name 决定了 Nginx 如何根据客户端请求的 Host 头匹配对应的虚拟主机&#xff08;Virtual Host&#xff09;。 1. 简介 Nginx 使用 server_name 指令来确定…...

编程新知 2025/9/6 16:47:17

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

Yolov8 目标检测蒸馏学习记录

yolov8系列模型蒸馏基本流程&#xff0c;代码下载&#xff1a;这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中&#xff0c;**知识蒸馏&#xff08;Knowledge Distillation&#xff09;**被广泛应用&#xff0c;作为提升模型…...

编程新知 2025/12/14 3:26:26

虚拟电厂发展三大趋势：市场化、技术主导、车网互联

市场化&#xff1a;从政策驱动到多元盈利 政策全面赋能 2025年4月&#xff0c;国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》&#xff0c;首次明确虚拟电厂为“独立市场主体”&#xff0c;提出硬性目标&#xff1a;2027年全国调节能力≥2000万千瓦&#xff0…...

编程新知 2025/8/3 1:06:36

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

编程新知 2025/10/17 22:08:13

Caliper 配置文件解析：fisco-bcos.json

config.yaml 文件 config.yaml 是 Caliper 的主配置文件，通常包含以下内容： test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...

编程新知 2025/10/24 15:14:02