はじめに
DreamHanksの松下です。
今回からajaxについての解説を２回に分けて行いたいと思います。
前回はajaxの概要と簡単な使い方について解説します。
今回はajaxを使ってサーバーにリクエストを投げて、サーバーからレスポンスを返す方法
サンプルアプリの仕様について
検索ボタンを押下したときに、赤枠の一覧が非同期で動的にHTMLが生成されます。
今回はこちらの動的HTML生成方法について解説します。
◆検索ボタン押下前
◆検索ボタン押下後
動的HTML生成方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<f:form name="resultform" action="${pageContext.request.contextPath }/searchborad/update_result" method="post" modelAttribute="searchBoradForm"> <!--テーブル生成位置--> <table id="maintable"> <thead> <tr> <th><input type="checkbox" class="allCheck" onclick="allCheck()"></th> <th>title</th> <th>position</th> <th>check_flg</th> <th>creat_at</th> </tr> </thead> </table> </f:form> |
今回自動生成をするのは、tableタグ内のtbodyタグについて自動生成します。
上記のようにtheadタグに関しては、あらかじめ記述して画面に表示しております。
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
// 検索ボタンを押したときの制御 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 }/searchborad/search_result", // 上記で作ったreqParamを、jsonの文字列の形式にpathingする data : JSON.stringify(reqParam), // データの形式をjsonに設定 dataType: "json" // レスポンスを受けて（検索結果のリスト）によって、動的にhtmlタグを作って表を作る }).then(function(resultBoradList){ var tbody = document.createElement('tbody'); tbody.setAttribute('class','tbody'); // テーブル本体を作成 for (var i = 0; i < resultBoradList.length; i++) { // tr要素を生成 var tr = document.createElement('tr'); tr.setAttribute('class','tr'); // th・td部分のループ for (key in resultBoradList[0]) { // td要素を生成 var td = document.createElement('td'); // input要素を生成(checkbox) var inputCheckBox = document.createElement('input'); // keyがidの場合チェックボックスを生成する if(key=="id"){ // チェックボックスを生成する＊＊＊＊＊始め＊＊＊＊＊＊＊＊＊＊＊＊＊ // input要素をチェックボックスにする inputCheckBox.setAttribute('type','checkbox'); // name属性をつけて、「checkbox」という名前にする inputCheckBox.setAttribute('name','checkbox'); // 更新処理のために、class属性の値をidの値をいれる（ユニークにする） // そのあと、更新ボタンを押下したときにこのIDで特定して値を取得して配列に詰める inputCheckBox.setAttribute('class',resultBoradList[i]["id"]); // 表のほうにもオンクリック要素をつける。 // チェックしたら１、しなかったら０を設定するようにする inputCheckBox.onclick = function check(){ if($('input[name="checkbox"]').prop("checked")==true){ $('input[name="checkbox"]').val("1"); } // チェックを外した場合、tdのほうのチェックボックスを全て外す else { $('input[name="checkbox"]').val("0"); } } // レスポンスのjson配列のkey「checkFlg」のvalueが「１」だった場合、チェックする if(resultBoradList[i]["checkFlg"]=="1"){ inputCheckBox.setAttribute('checked','checked'); } // チェックボックスを生成する＊＊＊＊＊終わり＊＊＊＊＊＊＊＊＊＊＊＊＊ // テーブルのDOMの一番最後の階層であるtdタグの後ろにinputCheckBox要素を追加する td.appendChild(inputCheckBox); } // checkFlgの場合 else if(key=="checkFlg"){ td.setAttribute('class',resultBoradList[i]["id"] + "checkFlg"); // id・checkFlg以外の場合そのままテーブルに値を代入する } else { // td要素内にテキストを追加 td.textContent = resultBoradList[i][key]; } // td要素をtr要素の子要素に追加 tr.appendChild(td); } // tr要素をtable要素の子要素に追加 tbody.appendChild(tr); } // 生成したtable要素を追加する document.getElementById('maintable').appendChild(tbody); // 表を生成した後にもう一度for文を回して、checkFLgに値を詰めていく for (var i = 0; i < resultBoradList.length; i++) { for (key in resultBoradList[0]) { $("." + resultBoradList[i]["id"] + "checkFlg").text(resultBoradList[i]["checkFlg"]); } } }); } |
今回のajaxにおける自動生成の部分は「.then(function(resultBoradList){ この中 });」です
tbodyを生成
さっそくajax内の1行目にtbodyを生成します。
|
1 2 |
var tbody = document.createElement('tbody'); tbody.setAttribute('class','tbody'); |
document.createElementメソッドを使って任意のタグを設定すると、htmlタグが生成されます。
そして、setAttributeメソッドを使って、作ったtbodyタグにクラス名を付属します。
レスポンスを使ってループ処理
|
1 2 3 |
for (var i = 0; i < resultBoradList.length; i++) { // htmlタグ生成処理 } |
サーバーから取得した掲示板のレコード情報のリスト分処理を行います。
htmlタグ生成処理の解説
①テーブルの行にあるhtmlタグtrをtbodyと同じ要領で生成します。
|
1 2 3 |
// tr要素を生成 var tr = document.createElement('tr'); tr.setAttribute('class','tr'); |
②列を作るためにループ処理
|
1 2 3 4 |
// td部分のループ for (key in resultBoradList[0]) { // 列情報を生成する } |
③列を表すhtmlタグtdタグを生成
|
1 2 |
// td要素を生成 var td = document.createElement('td'); |
④チェックボックスを作るためにinputタグを生成
|
1 2 |
// input要素を生成(checkbox) var inputCheckBox = document.createElement('input'); |
inputタグを生成して、この後の判定処理でこのinputタグをcheckboxにしていきます。
④idだった場合チェックボックスを生成する
取得したレスポンスは下記のようなレコードを取得しています
| id | title | position | check_flg | creat_at |
| id | title | position | check_flg | creat_at |
| id | title | position | check_flg | creat_at |
この時にidだった場合、下記の処理を行います
|
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 |
// チェックボックスを生成する＊＊＊＊＊始め＊＊＊＊＊＊＊＊＊＊＊＊＊ // input要素をチェックボックスにする inputCheckBox.setAttribute('type','checkbox'); // name属性をつけて、「checkbox」という名前にする inputCheckBox.setAttribute('name','checkbox'); // 更新処理のために、class属性の値をidの値をいれる（ユニークにする） // そのあと、更新ボタンを押下したときにこのIDで特定して値を取得して配列に詰める inputCheckBox.setAttribute('class',resultBoradList[i]["id"]); // 表のほうにもオンクリック要素をつける。 // チェックしたら１、しなかったら０を設定するようにする inputCheckBox.onclick = function check(){ if($('input[name="checkbox"]').prop("checked")==true){ $('input[name="checkbox"]').val("1"); } // チェックを外した場合、tdのほうのチェックボックスを全て外す else { $('input[name="checkbox"]').val("0"); } } // レスポンスのjson配列のkey「checkFlg」のvalueが「１」だった場合、チェックする if(resultBoradList[i]["checkFlg"]=="1"){ inputCheckBox.setAttribute('checked','checked'); } // チェックボックスを生成する＊＊＊＊＊終わり＊＊＊＊＊＊＊＊＊＊＊＊＊ // テーブルのDOMの一番最後の階層であるtdタグの後ろにinputCheckBox要素を追加する td.appendChild(inputCheckBox); |
チェックボックスにいろいろ要素を付けていますが、ここが一番難しいと思います。
要するにチェックボックスのクラス要素が他と被らないresultBoradList[i][“id”]を名前にしたいのです。
|
1 2 3 |
// 更新処理のために、class属性の値をidの値をいれる（ユニークにする） // そのあと、更新ボタンを押下したときにこのIDで特定して値を取得して配列に詰める inputCheckBox.setAttribute('class',resultBoradList[i]["id"]); |
resultBoradList[i][“id”]はi番目のidカラムの値を設定するという意味です。
ヘッダー：| id | title | position | check_flg | creat_at |
1番目：| id001| 韓国料理食べた | 1 | 1| 20201010 |
2番目：| id002 | 日本料理食べた | 2 | 0| 20201010 |
3番目：| id003 | 中国料理食べた | 3 | 0| 20201010 |
1番目のidカラムというと、id001を設定するという意味です。
◆オンクリック要素も付属させる
|
1 2 3 4 5 6 7 8 9 10 |
// 表のほうにもオンクリック要素をつける。 // チェックしたら１、しなかったら０を設定するようにする inputCheckBox.onclick = function check(){ if($('input[name="checkbox"]').prop("checked")==true){ $('input[name="checkbox"]').val("1"); } // チェックを外した場合、tdのほうのチェックボックスを全て外す else { $('input[name="checkbox"]').val("0"); } } |
そして、inputCheckBox.onclick = function check(){ 内容 }をすることによって
チックボックスにonclick要素まで付属させます。
◆なおかつ、check_flgが1の場合はチェックをする
|
1 2 3 4 |
// レスポンスのjson配列のkey「checkFlg」のvalueが「１」だった場合、チェックする if(resultBoradList[i]["checkFlg"]=="1"){ inputCheckBox.setAttribute('checked','checked'); } |
◆要素にアペンドする
このようにして、生成されたHTML要素は親のノードにくっつけなくては
宙づり状態となり画面上では現れません（表示されません）
|
1 |
td.appendChild(inputCheckBox); |
下記の順番で順々にアペンドします。
親要素（document.getElementById(‘maintable’)）＞ tbody > tr > td > checkbox
DOMスクリプティングを学ぼう
HTMLタグの動的生成方法の一例を学んでいただいたところで、もっと根っこの部分である
DOMスクリプティングについて解説します。
HTMLは下記のようにツリー構造として表せます。
htmlタグ > bodyタグ > 複数のform > 複数のinputタグなど
DOMスクリプティングとは，JavaScriptのようなプログラミング言語から，HTMLやXMLを操作するための方法を規定したものといえます。
DOMスクリプティングのコツは
どのようにその木の先の葉っぱであるタグを特定し、効率よくやりたいことを行う。
タグの特定といっても、幹からたどっていく方法もあれば
タグのid名を一発で狙い撃ちする方法もあります。
いろいろなDOMツリーへのアクセス方法があるので、どのような方法があるのかは
あらかじめリファレンスを見て覚えておきましょう。
できることは大きく４つあります。
しかし、その4つの中でもいろいろなことができるので、どのような方法があるのかは
あらかじめリファレンスを見て覚えておきましょう。
・値の取得
・値の変更
・スタイルの変更 例：cssで色付け
・イベントを付ける 例：オンクリック要素を付属
上記のことを予め知識としてある程度知っていると
DOMスクリプトを読んだときの基礎体力となります。
DOMスクリプティングって何？なにができるの？というレベルだと
自力でスクリプトを読むのは検索回数が多くなり、長いスクリプト読むときについていけなくなり
挫折する大きな原因となります。
予めなにができるのか？どんな方法があるのか？を時間がるときに覚えておきましょう。
コメント