JSP+Servlet打造你的自定义计算器

前端

2022-11-03 00:04:35

打造你的自定义计算器：用 JSP 和 Servlet 掌握计算

在日常生活中，计算器已成为不可或缺的工具，帮助我们处理各种计算任务。但现有的计算器往往功能有限，难以满足个性化需求。现在，让我们探索如何利用 JSP 和 Servlet 技术打造一个功能强大、界面美观的自定义计算器！

准备就绪

踏上这段计算之旅前，确保以下准备就绪：

Java 开发环境（JDK）
Tomcat 服务器
Eclipse 集成开发环境 (IDE)
对 JSP 和 Servlet 技术的基础知识

构建 Java 框架

创建一个名为“Calculator”的 Java 项目。
创建一个“src”文件夹，用于存放源代码文件。
在“src”文件夹下创建包“com.example.calculator”。

编写 Java 代码

在“com.example.calculator”包中创建“CalculatorServlet”类，继承自 HttpServlet 类。
重写 doGet() 和 doPost() 方法，分别处理 GET 和 POST 请求。
在这些方法中获取请求参数，执行计算并返回结果。

@WebServlet("/CalculatorServlet")
public class CalculatorServlet extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) {
        // 获取请求参数
        int num1 = Integer.parseInt(request.getParameter("num1"));
        int num2 = Integer.parseInt(request.getParameter("num2"));
        String operator = request.getParameter("operator");

        // 执行计算
        int result = calculate(num1, num2, operator);

        // 返回结果
        response.getWriter().print(result);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) {
        doGet(request, response);
    }

    private int calculate(int num1, int num2, String operator) {
        switch (operator) {
            case "+":
                return num1 + num2;
            case "-":
                return num1 - num2;
            case "*":
                return num1 * num2;
            case "/":
                return num1 / num2;
            case "%":
                return num1 % num2;
            default:
                return 0;
        }
    }
}

创建 JSP 页面

在“WebContent”文件夹下创建“index.jsp”页面，用于显示计算器界面。
使用 HTML 和 JavaScript 创建计算器界面，并使用表单将用户输入发送到“CalculatorServlet”。

<!DOCTYPE html>
<html>
<head>
    
</head>
<body>
    <form action="CalculatorServlet" method="post">
        <input type="number" name="num1" placeholder="第一个数字">
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
            <option value="%">%</option>
        </select>
        <input type="number" name="num2" placeholder="第二个数字">
        <input type="submit" value="计算">
    </form>
    <p id="result"></p>
</body>
<script>
    const resultElement = document.getElementById("result");

    const form = document.querySelector("form");
    form.addEventListener("submit", (event) => {
        event.preventDefault();

        const formData = new FormData(form);
        const num1 = formData.get("num1");
        const num2 = formData.get("num2");
        const operator = formData.get("operator");

        const requestBody = {
            num1: parseInt(num1),
            num2: parseInt(num2),
            operator: operator
        };

        fetch("CalculatorServlet", {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(requestBody)
        })
        .then(response => response.json())
        .then(data => {
            resultElement.innerHTML = data;
        })
        .catch(error => {
            console.error("Error:", error);
        });
    });
</script>
</html>