はじめに
DreamHanksの松下です。
前回はajaxの概要と簡単な使い方について解説します。
今回はajaxを使ってサーバーにリクエストを投げて、サーバーからレスポンスを返す方法
サンプルアプリの仕様について
アプリケーションサーバー側での処理を解説する前に
軽くサンプルで作る画面の仕様について解説します。
このアプリでは複数の検索条件を入力し検索ボタンを押下した場合に
サーバーでその検索条件に当てはまるDBの複数のレコードを取得し、Listでレスポンスします。
そして、そのレスポンスを使って非同期でjavascriptを使って、HTMLタグを動的に生成します。
ajaxを使ってサーバーにリクエストする
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<f:form name="searchform" action="${pageContext.request.contextPath }/searchboard/search_result" method="post" modelAttribute="searchboardForm"> 多重検索  <input type="text" id="multiSearch" /><br> 部分検索  <input type="text" id="partialSearch" /><br> 権限検索  <input type="text" id="position" /><br> 日付検索  <input type="date" id="startSearchDate" /> ～ <input type="date" id="endSearchDate" /><br> <input id="search-button" type="button" onclick="makeTable()" value="検索"> </f:form> // 検索ボタンを押したときの制御 function makeTable(){ // jQueryを使って、画面で入力されたものを全て取得 var reqParam = { "multiSearch" : $("#multiSearch").val(), "partialSearch" : $("#partialSearch").val(), "position" : $("#position").val(), "startSearchDate" : $("#startSearchDate").val(), "endSearchDate" : $("#endSearchDate").val() }; // ajaxを使って表を非同期で動的に作成する。 $.ajax({ // http通信方式をpostに設定 type : "POST", // コンテキストタイプをjsonに設定 contentType : "application/json", // submitしたときの移動するメソッドのURLを設定 url : "${pageContext.request.contextPath }/searchboard/search_result", // 上記で作ったreqParamを、jsonの文字列の形式にpathingする data : JSON.stringify(reqParam), // データの形式をjsonに設定 dataType: "json" // レスポンスを受けて（検索結果のリスト）によって、動的にhtmlタグを作って表を作る }).then(function(resultboardList){ // HTMLを動的に生成する処理 }); } |
ajaxを使うために
ajaxはjQueryのライブラリを使って使えるようになる非同期処理です。
ですので、jQueryをインポートしてください。
|
1 |
<script src="http://code.jquery.com/jquery-latest.js"></script> |
サーバーにリクエスト投げるまでのJSPの解説
検索ボタンについて
|
1 |
<input id="search-button" type="button" onclick="makeTable()" value="検索"> |
検索ボタンにはonclick要素が付いていて、
検索ボタンを押下するとmakeTableというメソッドが実行されます。
makeTableメソッドが実行されるとまず、reqParamの設定をします。
reqParamについて
|
1 2 3 4 5 6 7 8 |
// jQueryを使って、画面で入力されたものを全て取得 var reqParam = { "multiSearch" : $("#multiSearch").val(), "partialSearch" : $("#partialSearch").val(), "position" : $("#position").val(), "startSearchDate" : $("#startSearchDate").val(), "endSearchDate" : $("#endSearchDate").val() }; |
jQueryを使って$(“#multiSearch”).val()画面で入力された値を取得し、
multiSearchというkeyにマッピングしています。
SpringMVCモデルでは通常<f:input>のinputタグを使ってpathingをして、
Formクラスのsetterメソッドを使ってサーバー側に値を送ります。
しかし、今回はajaxを使うので普通のinputタグを使用します
|
1 |
多重検索  <input type="text" id="multiSearch" /><br> |
リクエストを投げる
前回の記事で解説したように、$.ajax({})内でajaxの設定をします。
そして、下記のURLのメソッドに遷移します。
|
1 |
url : "${pageContext.request.contextPath }/searchboard/search_result" |
サーバー側の処理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
/** * 入力されたデータをもとにDB検索を行い検索掲示板結果を出力するためのメソッド * @param searchboardForm クライアント側で入力されたデータ * @return 検索掲示板画面のJSPファイル名 */ @ResponseBody @RequestMapping(value = "/search_result", method = RequestMethod.POST) public List<board> selectSearchboard(@RequestBody Map<String, Object> reqParam) { // 入力されたデータをもとに検索掲示板情報を取得する List<board> boardList = searchboardService.getSearchboardInfo(reqParam); return boardList; } |
リクエストの取得の仕方
画面側からリクエストを受けるために引数に@RequestBodyというアノテーションを使います。
HTTP通信はどれがリクエストパラメータを格納する引数なのか理解できません。@RequestBodyを引数に設定することによって、リクエストパラメータが格納されます。
json形式で送らるため、引数の型はMap<String, Object>となります。
レスポンスの送り方
受け取ったリクエストパラメータを使って、DBとやり取りをして
検索条件に合うデータをListで取得します。
レスポンスを返す場合は、returnで変数を設定することによって返せます。
しかし、この時にメソッドに@ResponseBodyというアノテーション設定する必要があります。」
このアノテーションは戻り値であるboardListに掛かっています。
最後に
次回はサーバーから返却されたレスポンスを使って、動的にHTMLタグを生成する方法について詳しく解説いたします。
お読みいただきありがとうございました。
コメント