• PE-BANKと契約して26歳で年収800万になった大阪のフリーランスですが全てを語ります





いっちばん基本的なJavaのサーブレットで書いたプログラムで、Ajax通信を行うサンプルコードをまとめました。

以下の感じ
概要

・Ajax通信はjQueryを使用
・テキストボックスに数字を入れてボタンを押すとAjaxが動いて数字がインクリメントされていく
・用意するファイルは3つ
 IndexServlet.java(初期表示用のサーブレット)
 index.jsp(画面)
 AjaxServlet.java(Ajax実行用のサーブレット)




本来はAjax通信と言えばDB接続してなんぼなんですが、今回はサンプルの枠を提供するのが主旨なので、単にインクリメントするだけとしています。

それでは見ていきましょう。

Ajax通信を行うサンプルコード

IndexServlet.java(初期表示用のサーブレット)

ここでは単に画面を表示するだけなので、jspを呼び出すだけです。


index.jsp(画面)

テキストボックスとボタンを用意します。

ボタン押下時にテキストボックスの値をAjaxのパラメータとして送り、返ってきた値を再度テキストボックスに設定する感じです。


.done(function (変数名) {

のようにコールバック関数のカッコの中に書いた変数名で返却値を扱えるので、それをテキストボックスに設定しています。

urlにはAjax実行用のサーブレットの@WebServletのパスを指定します。

AjaxServlet.java(Ajax実行用のサーブレット)

jsp側と合わせるべき箇所は、
@WebServlet(“/AjaxServlet”)のパス
request.getParameter(“num”)のnum


です。

また、Ajaxの実行時にGETPOSTか指定するので、それと一致するほうに記述するようにしましょう。


ちなみに、Integer.parseIntは数値型への変換を行いますが、処理対象が空文字であったり、数値に変換できない値の場合は例外が発生します。

ここではあえて例外が発生するようなコードにしていますので、数値に変換できない文字を入力してボタンを押下したときに、


読み込み失敗


というアラートがあがるのを確認してみてください。

さいごに

以上のコードで、テキストボックスに数値を入力してボタンを押すと押すたびに数値がインクリメントされるプログラムが完成しました。

あとはこれをベースにAjaxServletの中でDB読込等をしていけば、それっぽいことができると思います。

また、上記のコードでは最新のAjax通信の書き方をしています。

それ以外の書き方はこの記事でまとめていますので読んでみて下さい^^

 jQueryのajax書き方一覧!バージョン意識してます?動作するバージョンまとめ



それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-