###タイトルだとなんのこっちゃなので…(ざっくりと概要)
下記開発環境でjQueryの$.ajax()を使用して非同通信をするwebアプリケーションを作成しています。
ざっくりアプリケーションの内容を話すと(開発環境とかは一番下に記載してあります)
1.top.jsp表示
2.top.jspのajaxメソッドでTopServlet.javaと非同期通信をしてDBから情報を取得し、JSON形式のデータを渡す(例 {{"id":1,"item":"gun"},{"id":2,"item":"sword"},...}
3.top.jspにてJSON形式のデータを整形して、<a>タグとしてappendする
4.top.jspにappendされた<a>タグを押下すると、またajaxメソッドが実行され、DetailServletにJSON形式のデータを引き渡す
5.DetailServletにてJSON形式のデータを整形し、idから取得される番号をDBから取得して、詳細情報を取得してくる(例 {{"id":1,"item":"gun","detail":"This gun is..."}}
6.top.jspにて、JSON形式を整形して、DBから取得してきた詳細情報をappendして表示する
以上となります。
###困っているところ
上記の4番のajaxメソッド押下時の処理が困っています。
上記3にてaタグをappendする際に、class属性に取得してきたidを指定しているのですが、そのidをどれを押してもDetailServletとajax通信できるようにしたいです。
###実装してあるjsを抜粋
以下にtop.jspに実装するjs部分を抜粋して載せさせていただきます。
$(function() { $.ajax({ type : 'GET', url : 'http://localhost:8080/sample/TopServlet', dataType : 'json', success : function(json) { var jsonObj = JSON.parse(json); for(var i=0;i < jsonObj.length;i++){ $('.append-object').append('<a href="" id="' + jsonObj[i].id + '" onclick="return false;" >' + jsonObj[i].item + '</a><br>'); } }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert("エラーが発生しました:" + textStatus + ":\n" + errorThrown); } }); //下で困っています!上でaタグを追加したはいいけど、その追加されたaタグが押下された時に以下の処理を走らせたいです。さらに言えばid等どのaタグが押下されたか識別できる形で…(自分で考えられる限界が下記です。実行してもエラーになってしまいます...) $(document).on('click','a',function(e){ var id = $("a").attr("id"); $.ajax({ type : 'GET', url : 'http://localhost:8080/sample/DetailServlet', data : { "id" : id }, dataType : 'json', success : function(json) { var jsonObj = JSON.parse(json); }, error : function(XMLHttpRequest, textStatus, errorThrown) { alert("エラーが発生しました"); } }); }); });
###開発環境など
- 使用言語
java8(Servlet,jsp)
jQuery(jquery-1.10.2.min)
拙い文章ではありますが、よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー