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

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

news 文章来源：https://blog.csdn.net/qq_48479056/article/details/131456539 2025/5/24 1:17:07

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

【javascript】 javascript对象函数总结

Object.entries( ) 作用：返回一个数组，获取对象所有可枚举属性的名称和可枚举属性的值 const obj { a: 1, b: 2 }; const entries Object.entries(obj); console.log(entries); // [[a, 1], [b, 2]] Object.keys( ) 作用：返回一个数组…...

编程日记 2023/6/30 11:46:30

LVS+Keepalived 高可用群集实战部署

LVSKeepalived 高可用群集实战部署一、Keepalived的概念1、LVS2、Keepalived及其工作原理3、Keepalived体系主要模块及其作用4、VRRP协议（虚拟路由冗余协议） 二、LVSKeepalived 高可用群集部署LVS 部署1.配置负载调度器（主、备相同&#xff…...

编程日记 2023/6/30 10:39:48

MCU启动过程

启动文件启动文件到底什么作用，其实启动文件主要是进行堆栈之类的初始化， 中断向量表以及中断函数定义。启动文件要引导进入main 函数。开发STM32F103用的启动文件是startup_stm32f10x_hd.s S32K146使用的启动文件是startup_S32K146.S 芯片架构 STM…...

编程日记 2023/6/30 10:06:26

Mysql 5.6使用配置文件my.ini来设置长时间连接数据库

对于已经安装了mysql和未安装都是同样的步骤。在C:\Program Files (x86)\MySQL\MySQL Server 5.6下生成一个my.ini文件。然后删除或者修改my-default.ini的名字。一、my.ini配置文件如下 [mysqld] basedirC:\Program Files (x86)\MySQL\MySQL Server 5.6 datadirC:\Program F…...

编程日记 2023/6/30 9:33:05

改进YOLOv5/YOLOv8:复现结合即插即用 | 高效多尺度注意力（EMA），模块成为YOLOv5改进的小帮手

高效多尺度注意力（EMA）论文介绍简介EMA模块图像分类实验目标检测实验yolov5加入方法yolo注册yaml文件yolov8加入方法EMA代码及加入方式yaml文件1EMA注意力论文 https://arxiv.org/ftp/arxiv/papers/2305/2305.13563.pdf 论文介绍通道或空间的显著有效性注意机制对产生更多…...

编程日记 2023/6/30 8:59:44

图像色彩增强论文调研

阅读论文 Deep Symmetric Network for Underexposed Image Enhancement with Recurrent Attentional Learning(ICCV2021) 使用对称编码器和解码器学习图像从低曝光转化到正常图片的映射方式，通过IFT（Invertible Feature Transformer）网络和提…...

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

ORACLE透明网关ODBC连接MYSQL

客户需求oracle访问mysql数据，客户是linux7.3 11.2.0.4单实例，字符集GBK，mysql是5.7.31，字符集UTF8，下面结合网上的文档和自己的实践，配置过程如下 1.安装oracle透明网关首先在oracle服务器上面安装ora…...

编程日记 2023/6/30 7:53:02

Flutter网络请求框架Dio源码分析以及封装(二)--Cookie管理分析

Flutter网络请求框架Dio源码分析以及封装--Cookie管理分析前言问题如何使用CookieJarCookieManagerPersistCookieJar总结前言上一篇文章我们简单分析了一下Dio发出请求时的大致工作流程，这个只是Dio最基本的功能，而且我们还没有分析走到httpClientA…...

编程日记 2023/6/30 7:19:41