JSP+Servlet完成Web加法计算器(简单)

学完了Servlet和JSP的章节后,虽然也写了一些管理系统,偶然间看到计算器这个词,于是便动手写一下,因为回想起当初让我用js写个这个我都不会

首先新建一个项目,项目结构图下所示,我习惯用maven创建项目,这样节省不少时间

 导入一下所需要的依赖jar包,scope注意填写是provided范围

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <!--            此依赖和tomcat中的包冲突,如果要运行,需要将范围变成provide-->
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>taglibs</groupId>
            <artifactId>standard</artifactId>
            <version>1.1.2</version>
        </dependency>

 写一个简单的JSP页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <title>$Title$</title>
  </head>
  <body>
  <form method="post" action="/calcular/Servlet" name="cal">
    <input type="number" placeholder="输入数字" id="a" name="a" value="${a}">
    +
    <input type="number" placeholder="输入数字" id="b" name="b" value="${b}">
    <button id ="d" type="submit">=</button>
    <input type="text" id="c" name="c" value="${d}">
  </form>
  </body>
</html>

 创建一个Servlet类,把请求获取到的参数转换成整型后再相加,最后封装到request请求中,请求转发到我们的JSP页面

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet("/Servlet")
public class Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String a = request.getParameter("a");
        String b = request.getParameter("b");

        Integer c = Integer.valueOf(a) + Integer.valueOf(b);
        String d  = Integer.toString(c);

        request.setAttribute("d",d);
        request.setAttribute("a",a);
        request.setAttribute("b",b);
        request.getRequestDispatcher("index.jsp").forward(request,response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }
}

运行tomcat服务器,验证结果 

 

 好啦,一个简单的web计算器就做好啦!

在HTML、ServletJSP中实现一个简单计算器功能,通常需要以下几个步骤: 1. **HTML界面设计**: 创建一个HTML页面作为用户交互的前端。可以包含两个输入框用于数字输入,一个选择运算符的下拉菜单,以及一个提交按钮。例如: ```html <form action="CalculatorServlet" method="post"> Number 1:<input type="text" name="num1"><br> Number 2:<input type="text" name="num2"><br> Operation:<select name="operator"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select><br> <input type="submit" value="Calculate"> </form> ``` 2. **Servlet处理逻辑**: 创建一个名为`CalculatorServlet.java`的Servlet,这个Servlet会接收并处理从HTML表单发送过来的请求。它首先获取前端传来的数字和运算符,然后进行相应的计算,并将结果显示给用户。可以使用如下的基本结构: ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String num1 = request.getParameter("num1"); String num2 = request.getParameter("num2"); String operator = request.getParameter("operator"); double result; switch (operator) { case "+": result = Double.parseDouble(num1) + Double.parseDouble(num2); break; // ...其他运算符处理... } response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.println("<h1>Result: " + result + "</h1>"); } ``` 3. **JSP页面展示结果**: 如果你想在返回到用户的页面上显示结果,可以在Servlet使用JSP技术。创建一个名为`result.jsp`的文件,将计算结果显示其中,例如: ```jsp <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <body> ${result} </body> </html> ``` 4. **部署应用**: 将上述HTML、ServletJSP文件放在一个Web应用程序目录下,并通过服务器(如Tomcat)部署。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值