使用 Java 和 JavaScript 创建计算器
利用 Java 的灵活性和 JavaScript 的强大功能,我们可以创建一个定制的网站,不仅满足您的个人需求,还可以提供交互式和有用的工具。
在文章中,我们将重点介绍如何使用 Java 和JavaScript 构建一个简单的计算器。此计算器将允许用户输入数字和操作符,并获得结果。
Java 服务器端代码
我们的 Java 服务器端代码将负责处理用户的输入并生成结果。我们需要创建一个 Servlet,它将充当我们的控制器。Servlet 是 Java 类,用于处理 HTTP 请求并生成响应。
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;@WebServlet("/CalculatorServlet")
public class CalculatorServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 获取输入的数字和操作符int num1 = Integer.parseInt(request.getParameter("num1"));int num2 = Integer.parseInt(request.getParameter("num2"));String operator = request.getParameter("operator");// 计算结果int result = 0;switch (operator) {case "+":result = num1 + num2;break;case "-":result = num1 - num2;break;case "":result = num1 num2;break;case "/":result = num1 / num2;break;}// 将结果发送回客户端response.setContentType("text/html");response.getWriter().write(String.valueOf(result));}
}
JavaScript 客户端代码
我们的 JavaScript 客户端代码将负责在浏览器中呈现计算器。它将使用 HTML 和 CSS 创建用户界面,并使用 JavaScript 处理用户输入并向服务器发送请求。
// 创建用户界面
const form = document.getElementById("calculator-form");
const num1Input = document.getElementById("num1");
const num2Input = document.getElementById("num2");
const operatorInput = document.getElementById("operator");
const resultSpan = document.getElementById("result");// 添加事件监听器以处理提交事件
form.addEventListener("submit", (event) => {event.preventDefault();// 获取输入的数字和操作符const num1 = num1Input.value;const num2 = num2Input.value;const operator = operatorInput.value;// 使用 fetch API 向服务器发送请求fetch("CalculatorServlet", {method: "POST",headers: {"Content-Type": "application/x-www-form-urlencoded",},body: `num1=${num1}&num2=${num2}&operator=${operator}`,}).then(response => response.text()).then(data => {// 更新结果resultSpan.textContent = data;}).catch(error => {console.error(error);});
});
结果
将 Java 服务器端代码部署到您的 Web 服务器后,您就可以在浏览器中访问此计算器了。输入数字和运算符,然后点击“计算”按钮即可获得结果。
此计算器不仅是一个有用的工具,而且还展示了如何使用 Java 和 JavaScript 构建定制的网站。通过利用这两种技术的强大功能,您可以创建满足您独特需求的复杂和交互式应用程序。