使用JSP / Servlet和Ajax的简单计算器

这是我之前的问题的延续，但我觉得它应该独立，特别是因为我得到了非常详细的答案。

我想在jsp中创建一个简单的计算器。 将有两个用于数字的文本框和一个添加按钮。 理想情况下，我希望答案出现在页面中而不重新加载，但从我得到的答案来看，它似乎对我的规模来说太大了。 我可以想到：1）打印第三个文本框的答案（这可能吗？）或以某种方式加载相同的页面（使用添加按钮和所有）和答案（并能够输入不同的数字等） 。

你能建议一个好方法吗？

Answer 1

这对我的规模来说似乎太大了

这实际上取决于背景和function要求。 虽然这很简单而且微不足道。 它听起来更像是“太多信息”，你实际上需要单独学习单独的概念（HTTP，HTML，CSS，JS，Java，JSP，Servlet，Ajax，JSON等），以便更大的图片（所有这些语言/技术的总和）变得更加明显。 你可能会发现这个答案很有用。

无论如何，这里是如何使用没有Ajax的JSP / Servlet来实现的：

calculator.jsp ：

 
 
    
 
Result: ${sum}
  

使用CalculatorServlet映射到/calculator的url-pattern ：

 @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Integer left = Integer.valueOf(request.getParameter("left")); Integer right = Integer.valueOf(request.getParameter("right")); Integer sum = left + right; request.setAttribute("sum", sum); // It'll be available as ${sum}. request.getRequestDispatcher("calculator.jsp").forward(request, response); // Redisplay JSP. } 

---

让Ajaxical工作起来也不是那么难。 这是在JSP的HTML 中包含以下JS的问题（请向右滚动以查看代码注释，它解释了每一行的内容）：

并更改doPost的最后两行，如下所示：

  response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(String.valueOf(sum)); 

您甚至可以将其作为条件检查，以便您的表单仍适用于用户已禁用JS的情况：

  if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) { // Ajax request. response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(String.valueOf(sum)); } else { // Normal request. request.setAttribute("sum", sum); request.getRequestDispatcher("calculator.jsp").forward(request, response); } 

Answer 2

我不确定这是否有用，但它至少是一个简单的计算器程序

  protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { /*READ THE FIRST NUMBER FROM TEXTBOX NAMED num1*/ Integer num1= Integer.parseInt(request.getParameter("num1")); /*READ THE SECOND NUMBER FROM TEXTBOX NAMED num2*/ Integer num2=Integer.parseInt(request.getParameter("num2")); /*READ THE OPERATOR VALUE FROM SELECT TAG NAMED operator*/ String operator=request.getParameter("operator"); /*THE FINAL RESULT*/ Integer result=0; /*THE RESPONSE TO THE CLIENT WILL BE IN HTML FORMAT*/ response.setContentType("text/html"); PrintWriter out = response.getWriter(); try { /*ALTERNATIVELY IF STATEMENT CAN ALSO BE USED if("+".equals(operator)) { result = num1 + num2; } else if("-".equals(operator)) { result = num1 - num2; } else if("*".equals(operator)) { result = num1 * num2; } else if ("/".equals(operator)) { result = num1 / num2; } */ switch(operator) { case("+"): /*IF PLUS*/ result=num1+num2; break; case("-"): /*IF MINUS*/ result=num1-num2; break; case("*"): /*IF MULTIPLICATION*/ result=num1*num2; break; case("/"): /*IF DIVISION*/ result=num1/num2; break; } /* TODO output your page here. You may use following sample code. */ out.println(""); out.println(""); out.println(""); out.println(""); out.println(""); out.println(""); /*THE PART OF OUTPUT TO THE CLIENT*/ out.println("
" + num1 +" "+operator+" "+num2+" = " + result+"
"); out.println(""); out.println(""); } finally { out.close(); } } 

和HTML是

     
 enter first number    +   -   *   /   enter second number   Calculate  
   

Answer 3

可能，最简单的方法是使用两个字段创建表单并提交按钮。 在服务器端，您可以添加两个数字并打印它。 像：

 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html"); int a = Integer.valueOf(request.getParameter("a")); int b = Integer.valueOf(request.getParameter("b")); int res = a + b; response.getWriter().println(res); } 

Answer 4

这绝对可以完成，可以使用简单的html和javascript完成。 您可以避免使用服务器端Java计算。

在我看来，我们应该尝试在服务器上保持最少的负载。 为什么在客户端可以加载服​​务器？

通过编写诸如add（a，b），sub（a，b），mul（a，b），div（a，b）之类的javascript函数，可以实现诸如加法，减法，乘法和除法之类的简单计算。 并且可以在不同的按钮点击事件上调用这些函数。