代码之家 › 专栏 › 技术社区 › Amir Rachum

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

servlets jsp ajax javascript java

Amir Rachum · 技术社区 · 14 年前

这是我的延续 previous question ,但我觉得它应该独立,特别是因为我得到了非常详细的答案。

我想在jsp中创建一个简单的计算器。将有两个数字文本框和一个添加按钮。理想情况下,我希望答案出现在页面中而不重新加载,但从我得到的答案来看,它似乎太大,不适合我的规模。我可以想到:1)将答案打印到第三个文本框(这可能吗?)或者以某种方式加载同一个页面(带有add按钮和all)和答案(并且能够输入不同的数字等等)。

你能建议一个好办法吗?

4 回复 | 直到 7 年前

Community CDub 7 年前

它对我的秤来说似乎太大了

这实际上取决于上下文和功能需求。不过,这很简单,也很琐碎。听起来更像是“信息太多”了,实际上需要学习不同的概念(HTTP、HTML、CSS、JS、Java、JSP、Servlet、Ajax、JSON等) 个别地 this answer 那就有用了。

不管怎样,这里介绍了如何在不使用Ajax的情况下只使用JSP/Servlet来实现这一点:

calculator.jsp :

<form id="calculator" action="calculator" method="post">
    <p>
        <input name="left">
        <input name="right">
        <input type="submit" value="add">
    </p>
    <p>Result: <span id="result">${sum}</span></p>
</form>

CalculatorServlet url-pattern 属于 /calculator :

@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.
}

制造一些有用的东西也不难。在JSP的HTML中包含以下JS <head> (请滚动到右侧以查看解释每一行的代码注释):

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(document).ready(function() {                                                   // When the HTML DOM is ready loading, then execute the following function...
        $('#calculator').submit(function() {                                         // Locate HTML element with ID "calculator" and execute the following function on its "submit" event...
            $form = $(this);                                                         // Wrap the form in a jQuery object first (so that special functions are available).
            $.post($form.attr('action'), $form.serialize(), function(responseText) { // Execute Ajax POST request on URL as set in <form action> with all input values of the form as parameters and execute the following function with Ajax response text...
                $('#result').text(responseText);                                     // Locate HTML element with ID "result" and set its text content with responseText.
            });
            return false;                                                            // Prevent execution of the synchronous (default) submit action of the form.
        });
    });
</script>

改变最后两行 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);
    }

Zameer Ansari 11 年前

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

     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("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<title>Servlet ServletCalculator</title>");            
        out.println("</head>");
        out.println("<body>");
        /*THE PART OF OUTPUT TO THE CLIENT*/
        out.println("<h1>" + num1 +" "+operator+" "+num2+" = " + result+"</h1>");
        out.println("</body>");
        out.println("</html>");
    } finally {            
        out.close();
    }
}

而html是

    <!DOCTYPE html>
    <html>
        <body>
            <form action="ServletCalculator">
                enter first number <input name="num1" type="text"/>
        <select name="operator">
            <option value="+"> + </option>
            <option value="-"> - </option>
            <option value="*"> * </option>
            <option value="/"> / </option>
        </select>
        enter second number <input name="num2" type="text"/>
        <button type="submit"> Calculate </button>
            </form>
        </body>
    </html>

Stan Kurilin 14 年前

也许,最简单的方法就是 form 有两个字段和提交按钮。在服务器端,您可以添加两个数字并打印出来。 Smt类:

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);
}

Bikash Rath 12 年前

这绝对可以做到,而且可以使用简单的html和javascript来实现。您可以避免为此使用服务器端java计算。

在我看来,我们应该尽量在服务器上保持最小的负载。为什么要在客户端加载服务器?

通过编写诸如add(a,b)、sub(a,b)、mul(a,b)、div(a,b)等javascript函数,可以实现简单的计算,如加法、减法、乘法和除法。这些函数可以在不同的按钮单击事件上调用。