ajaxでjavascriptとjavaの連携をする
テストボタンをクリックしたらsearchの値をjavaに渡す。
searchの値を使ってjava側で処理した結果をjspのhogeに反映する。
■■jsp■■
jspというより書き方はhtmlになっている。
細かいこと気にしたら負け。
idはjsで使うので「js-○○」みたくしてみた。
<input type="button" id="js-test" value="テスト" /> <input type="text" name="search" value="${f:h(search)}" /> <input type="text" name="hoge" value="${f:h(hoge)}" />
■■javascript(jQuery)■■
// テストボタンをクリック $("#js-test").on("click", function(){ var postData = {}; postData.search = $("input[name=search]").val(); var postUrl = "/hoge/searchHoge"; $.ajax({ url: postUrl, type: "POST", dataType: "json", data: postData, success: function(json){ if(json["status"] == "error"){ alert(json["message"]); return false; } for(var j in json){ setjsondata(j, json[j]); } } }); }); // 取得してきたデータを画面に反映する function setjsondata(json_key, json_value){ if($("."+json_key).length > 0){ $("."+json_key).html(json_value); } if($("input[name="+json_key+"]").length > 0){ $("input[name="+json_key+"]").val(json_value); } if($("select[name="+json_key+"]").length > 0){ $("select[name="+json_key+"]").val(json_value); } }
■actionForm
public class HogeForm { public String search; public String hoge; }
■action
public class HogeAction { @ActionForm @Resource public HogeForm hogeForm; @Resource private HogeLogic hogeLogic; @Execute(validator = false) public String searchHoge() { JSONObject json = new JSONObject(); json.put("status", "success"); if (StringUtils.isEmpty(hogeForm.search)) { // searchが入力されていなかった json.put("status", "error"); json.put("message", "検索ワードを入力してください"); ResponseUtil.write(json.toString()); return null; } // DBから取得する(ロジックは省略します) MstHoge mstHoge = hogeLogic.getMstHoge(search); if (mstHoge == null) { // 取得できなかった json.put("status", "error"); json.put("message", "対象のデータが存在しません"); ResponseUtil.write(json.toString()); return null; } // 取得してきたデータをセット json.put("hoge", mstHoge.hoge); ResponseUtil.write(json.toString()); return null; } }