web-dev-qa-db-ja.com

JSP /サーブレットとAjaxを備えたシンプルな計算機

これは私の 前の質問 の続きのようなものですが、特に私が得た非常に詳細な回答のために、それだけで値するように感じます。

Jspで簡単な電卓を作成したいと思います。数字用の2つのテキストボックスと追加ボタンがあります。理想的には、リロードせずに回答をページに表示したいのですが、得られた回答からは、スケールに対して大きすぎるようです。私は次のいずれかを考えることができます：1）3番目のテキストボックスに回答を印刷する（これは可能ですか？）または何らかの方法で同じページを（追加ボタンとすべてを使用して）回答とともにロードします（そして異なる番号を入力できるなど） 。

これを行うための良い方法を提案できますか？

javajavascriptajaxjspservlets
17
Amir Rachum

私のスケールには大きすぎるようです

それは実際にはコンテキストと機能要件に依存します。しかし、それは非常に単純で些細なことです。それはあなたにとって「情報が多すぎる」ように思え、実際には個別の概念（HTTP、HTML、CSS、JS、Java、JSP、サーブレット、Ajax、JSONなど）を学ぶ必要があります個別に全体像（これらすべての言語/技術の合計）がより明確になるようにします。 この回答 便利だと思うかもしれません。

とにかく、AjaxなしでJSP /サーブレットだけでそれを行う方法は次のとおりです。

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>

url-patternの/calculatorにマップされているCalculatorServletを使用：

@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の最後の2行を次のように変更します。

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

これが役立つかどうかはわかりませんが、少なくとも単純な計算プログラムです

     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
xameeramir

おそらく、最も簡単な方法は、2つのフィールドと送信ボタンを使用して form を作成することです。サーバー側では、2つの数値を追加して印刷できます。 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);
}
2
Stan Kurilin

これは絶対に行うことができ、単純なhtmlとjavascriptを使用して行うことができます。このためにサーバー側Java計算を使用することを避けることができます。

私の意見では、サーバーの負荷を最小限に抑えるように努める必要があります。これがクライアント側で実行できるのに、なぜサーバーをロードするのですか？

加算、減算、乗算、除算などの簡単な計算は、add（a、b）、sub（a、b）、mul（a、b）、div（a、b）などのJavaScript関数を記述することで実現できます。また、これらの関数は、さまざまなボタンクリックイベントで呼び出すことができます。

1
Bikash Rath