Простой калькулятор с JSP / Servlet и Ajax - PullRequest
17 голосов
/ 06 ноября 2010

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

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

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

Ответы [ 4 ]

23 голосов
/ 07 ноября 2010

это кажется слишком большим для моей шкалы

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

В любом случае, вот как вы могли бы сделать это с помощью всего лишь JSP / сервлета без 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 из /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 в HTML <head> JSP (пожалуйста, прокрутите вправо, чтобы увидеть комментарии к коду, объясняющие, что делает каждая строка):

<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);
    }
3 голосов
/ 20 августа 2013

Я не уверен, может ли это помочь, но это по крайней мере простая программа калькулятора

     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>
2 голосов
/ 07 ноября 2010

Вероятно, самым простым способом будет создание формы с двумя полями и кнопкой отправки. На стороне сервера вы можете добавить два числа и распечатать его. 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);
}
1 голос
/ 15 февраля 2013

Это абсолютно возможно и может быть сделано с использованием простых HTML и JavaScript.Вы можете не использовать для этого вычисления Java на стороне сервера.

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...