JSP /サーブレットとAjaxを使った簡単な計算機

Simple calculator with JSP/Servlet and Ajax


質問 written by Community @2017-05-23 12:08:09Z

: 17 : 4 : 32

これは私の以前の質問の一種の続きですが、特に私が得た非常に詳細な答えのために、私はそれがそれ自身であるに値すると感じます。

私はJSPで簡単な電卓を作成したいと思います。 数字用の2つのテキストボックスと追加ボタンがあります。 理想的には、答えを再ロードせずにページに表示したいのですが、得られた答えからは、私の規模では大きすぎると思われます。 私はどちらかを考えることができます:1)3番目のテキストボックスに答えを印刷する(これは可能ですか?)、または何らかの理由で同じページに(追加ボタンと全部で)ロードします(そして別の数字などを入力できます) 。

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

コメント 1

サーブレットなしで作成できます。HTMLとJavascriptのみ。別の方法 - サーバー上で計算をする。ここでは、ページの再読み込みを避けるためにAjaxが必要です。あなたはどのようにして問題を抱えていますか?

written by スタンクリリン2010年 @2010-11-06 21:11:12Z

回答 1 written by Community @2017-05-23 12:00:58Z
23

私の規模では大きすぎるようです

それは実際には状況と機能要件によって異なります。 それはとても単純で些細なことです。 それはあなたにとって「情報が多すぎる」こと、そして実際には別々の概念(HTTP、HTML、CSS、JS、Java、JSP、サーブレット、Ajax、JSONなど)を個別に学ぶ必要があるようです。 (これらすべての言語/技法の合計)がより明白になります。 あなたはこの答えが役に立つと思うかもしれません。

とにかく、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>

/calculator url-patternにマッピングされているCalculatorServlet/calculator

with CalculatorServlet which is mapped on an url-pattern of /calculator:


Ajaxicalのものを機能させるのもそれほど難しいことではありません。 JSPのHTML <head>内に次のJSを含めるという問題です(すべての1行の動作を説明するコードのコメントを見るには、右にスクロールしてください)。


そして、 doPost最後の2行を次のように変更します。

Making Ajaxical stuff to work is also not that hard. It's a matter of including the following JS inside the JSP's HTML <head> (please scroll to the right to see code comments which explains what every single line does):

ユーザーのJSが無効になっている場合でもフォームが機能するように、条件付きチェックにすることもできます。

<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>
コメント 1

最初のスニペットのフォローアップ:引き算をする別のボタンを追加した場合、どのボタンが押されたのかをサーブレットに伝えるにはどうすればいいですか?

written by Amir Rachum 2010年 @2010-11-06 23:01:35Z

コメント 2

ボタンの名前と値もリクエストパラメータとして送信されます。その存在や価値を確認してください。この答えも見てください。

written by BalusC 2010年 @2010-11-06 23:07:28Z

コメント 3

@BalusC:JSの例でボタンの値を渡す方法(JQueryは "送信"入力要素にはしません)?

written by AndrewBourgeois @2012-06-03 01:25:16Z

コメント 4

@バルスC:私は方法を見つけた:(1)フォームの送信を防ぐ "$( '#電卓')。送信(関数(){return false;});"(2) "送信タイプ"のクリックを聞きます: "$( '#calculator:submit')。click(関数(イベント){$ form = $(this).parent(" form "); $ .post( $ form.attr( 'action')、$ form.serialize()+ "&" + $(this).attr( "name")+ "=" + $(this).val()、function(responseText) {$( '#result')。text(responseText);});}); "(これは "serialize()"の後に何か追加することを含みます。)

written by AndrewBourgeois @2012-06-03 02:38:04Z

コメント 5

@ AndrewBourgeois:その通りです。jQueryは押されたボタンを一緒に送信しません。私はフォームをajax化するためにjQueryフォームプラグインをいつも使っていました、そしてそれは明らかにそれをしたものでした。私は、それがjQuery自身によってserialize()関数を使って最終的に行われたと誤っていつも想定していました。目覚めてくれてありがとう。

written by BalusC @2012-06-03 03:52:08Z

回答 2 written by student @2013-08-20 17:31:26Z
3

これで解決できるかどうかわかりませんが、少なくとも単純な電卓プログラムです。

     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は

and the html is

回答 3 written by Stan Kurilin @2010-11-06 21:19:07Z
2

おそらく、最も簡単な方法は、2つのフィールドと送信ボタンを持つフォームを作成することです。 サーバー側では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);
}
回答 4 written by Bikash Rath @2013-02-15 11:13:28Z
1

これは絶対に実行でき、単純なhtmlとjavascriptを使用して実行できます。 これにはサーバーサイドのJava計算を使用しないでください。

私の意見では、サーバーの負荷を最小限に抑えるようにしてください。 これがクライアント側で実行できるときになぜサーバーをロードするのですか?

加算、減算、乗算、除算のような単純な計算は、add(a、b)、sub(a、b)、mul(a、b)、div(a、b)のようなJavaScript関数を書くことによって達成できます。 そして、これらの関数は異なるボタンクリックイベントで呼び出すことができます。

コメント 1

ご想像のとおり、この質問をしたのはずっと前のことですが、オンライン計算機をベースにしたスタートアップを作成したいと思ったのではなく、JSPを学びたいからでした。

written by Amir Rachum @2013-02-16 11:14:21Z

コメント 2

OK。とった。:)。ただ助けようとしました。私の防御では、答えを書くためにstackoverflowを使い始めました。以前は私にとっては読み取り専用でした。:)。それで、この質問がずっと前にされたのに気づかなかった。

written by Bikash Rath 2013 @2013-02-24 06:20:52Z

コメント 3

いいんだよ。コミュニティへようこそ:)

written by Amir Rachum @2013-02-25 07:10:01Z