Простой калькулятор с JSP/сервлетом и Ajax

Это своего рода продолжение моего предыдущего вопроса, но я считаю, что он заслуживает того, чтобы быть самостоятельным, особенно из-за очень подробного ответа, который я получил.

Я хотел бы создать простой калькулятор в jsp. Будут два текстовых поля для чисел и кнопка добавления. В идеале, я хочу, чтобы ответ появился на странице без перезагрузки, но из полученного ответа он кажется слишком большим для моего масштаба. Я могу подумать: 1) напечатать ответ на третье текстовое поле (возможно ли это?) Или каким-то образом загрузить ту же страницу (с кнопкой добавления и все) с ответом (и иметь возможность вводить разные номера и т.д.),.

Можете ли вы предложить хороший способ сделать это?

ОТВЕТЫ

Ответ 1

кажется слишком большим для моего масштаба

Это действительно зависит от контекста и функциональных требований. Это довольно просто и тривиально. Похоже, что это "слишком много информации" для вас и что вам действительно нужно изучать отдельные концепции (HTTP, HTML, CSS, JS, Java, JSP, Servlet, Ajax, JSON и т.д.) Индивидуально, чтобы увеличить картинку (сумма всех этих языков/методов) становится более очевидной. Вы можете найти этот ответ полезный тогда.

В любом случае, вот как вы могли сделать это с помощью JSP/Servlet без Ajax:

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 of /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.
}

Создание Ajaxical материала для работы также не так сложно. Это вопрос включения следующего JS внутри JSP HTML <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);
    }

Ответ 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("<!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>

Ответ 3

Вероятно, самым простым способом будет создание form с двумя полями и кнопкой отправки. На стороне сервера вы можете добавить два номера и распечатать их. Smt like:

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

Ответ 4

Это можно сделать абсолютно, и это можно сделать с помощью простых html и javascript. Вы можете избежать использования java-вычисления на стороне сервера для этого.

На мой взгляд, мы должны стараться поддерживать наименьшую нагрузку на сервер. Зачем загружать сервер, когда это можно сделать на стороне клиента?

Простые вычисления, такие как сложение, вычитание, умножение и деление, могут быть достигнуты путем написания функций javascript, таких как add (a, b), sub (a, b), mul (a, b), div (a, b). И эти функции можно вызывать на dfferent событиях нажатия кнопки.