今回は、「Ajaxを使用したアプリケーション」です。
Ajaxを使うことで、画面遷移することなくサーバーの機能を利用することができます。
ブラウザ側とサーバー側に処理が必要なので、ちょっと面倒ですが、いろいろなことができるようになります。
■動画はこちら
■動画で使用しているソースコード
ソースコードが多いので、主要なコードのみ載せています。
他に欲しいソースコードがありましたら、youtubeのコメント欄へどうぞ。
JSP（in.jsp）
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 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>都道府県一覧</title> <script> function getTodofuken(){ //フォームデータを取得 const kenCode = document.getElementById("txtTodofukenCode").value; //リクエストの送信 const request = new XMLHttpRequest(); request.open("POST", "./sv2"); request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE && request.status === 200) { //レスポンスをテキストエリアに表示 const retStr = request.responseText; if(retStr.length > 0){ const strs = retStr.split(","); document.getElementById("txtTodofukenName").value = strs[0]; document.getElementById("txtYomigana").value = strs[1]; }else{ document.getElementById("txtTodofukenName").value = ""; document.getElementById("txtYomigana").value = ""; } } } request.setRequestHeader("content-type","application/x-www-form-urlencoded;charset=UTF-8"); request.send("txtTodofukenCode=" + encodeURIComponent(kenCode)); } </script> </head> <body> <h2>検索条件</h2> <table> <tr> <td>都道府県コード</td> <td> <input type="text" id="txtTodofukenCode" onblur="getTodofuken()" /> </td> </tr> <tr> <td>都道府県名</td> <td> <input type="text" id="txtTodofukenName" /> </td> </tr> <tr> <td>読み仮名</td> <td> <input type="text" id="txtYomigana" /> </td> </tr> </table> </body> </html> |
