Q&A
いつもお世話になります。
使用しているもの：Eclipse、API、JavaScript、jQuery、AJAX、JSON
EclipseでAPIを作動させローカルの指定してある。URL上にJSON表記でデータが表示される。
まず下記2点のHTMLファイルを見てほしいです
パターン①
HTML
1<!DOCTYPE HTML> 2<HTML> 3<head> 4<link rel="stylesheet" href="./css/jquery-ui.min.css"> 5<script src="./js/jquery.js" charset="UTF-8"></script> 6<script src="./js/jquery-1.9.0.min.js" charset="UTF-8"></script> 7<script src="./js/test1.js" charset="UTF-8"></script> 8<script src="./js/jquery-ui.js" charset="UTF-8"></script> 9<script src="js/Suggest.js"></script> 10</head> 11<body> 12<form method="get"action="http://localhost:8180/api/stock/search?q=" Accept-charset="UTF-8"> 13<input type="text" id="ac2" name="cat_name" > 14<input type="submit" value="検索"></form> 15 16</body> 17</HTML>
パターン②
HTML
1 <html> 2<head> 3 <title>js sample</title> 4 <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script> 5 <script type="text/javascript"> 6 7 //画面構築完了後 8 $(function() { 9 $("#btn_1").click(function(){ 10 $.ajax({ 11 type: 'GET', 12 url: 'http://localhost:8180/api/stock/search?q=', 13 dataType: 'json', 14 jsonCallback: 'data', 15 success: function(json){ 16 var rows = ""; 17 18 $.each(json, function(i, item){ 19 20 21 $.each(item,function(key,value){ 22 rows += "<tr>"; 23 rows += "<td>"; 24 rows += key; 25 rows += "</td>"; 26 rows += "<td>"; 27 rows += value; 28 rows += "</td>"; 29 }); 30 31 }); 32 //テーブルに作成したhtmlを追加する 33 $("#tbl").append(rows); 34 } 35 }); 36 }); 37 }); 38 39 </script> 40</head> 41<body> 42 <table id="tbl" border="1"> 43 <tbody> 44 <tr> 45 <th>種類</th><th>名前</th> 46 </tr> 47 </tbody> 48 </table> 49 <input id="btn_1" type="button" value="検索" /> 50</body> 51</html>
各HTMLの役割の説明をさせていただきます。
パターン①の内容はサジェスト機能が実装されており、URL先に指定してあるJSON形式のデータをサジェスト候補としてだして、formメソッドで指定してあるURL先+検索項目をのせて検索結果として表示させる機能です。（ただしJSON形式ででるので見にくい）
パターン②はクリックを押すと指定してあるURL先からJSON形式のデータを取得してテーブルに変換して表示する機能です。（ただしURL先が固定のため逐一URL先を変更しないといけない。）
この二つの機能を合わせた機能にしたいと思います。
サジェスト→検索→テーブル表示（JSON変換）
方法をご存知の方教えてください。御願いします。
まだまだ初心者で分かりにくい点などあるかと思います。その場合遠慮なくおっしゃって下さい。
回答1件
0
ベストアンサー
「画面構築完了後」の処理と同じようなことを、検索ボタン押下時に行えばいいと思います。
以下の手順で行ってください。
まず、現在は検索ボタン押下時に別のHTMLに遷移していると思います。
これはformタグとsubmitボタンによる効果で、自動的にactionで指定した URL に "画面自体が" 切り替わります。
そうではなく、ボタンをクリックしても遷移しない状態を作ります。
これは<input type="button"> または <button></button>を使用することで実現できます。
(formタグは削除すること)
次に、遷移の代わりに行う処理を指定します。
javascript
1$("ボタンを取得するセレクタ").on("click", 関数名);
とすると、指定した名前の関数が、ボタン押下時に実行されます。
指定する関数の中身は、ご質問のコードにある検索結果の取得・表示処理です。
javascript
1function 関数名() { 2 $.ajax(...); 3}
とりあえず新たな疑問も発生するかと思いますが、それはそれで追記なり別の質問なりご活用いただくとして。(投げ
ポイントは以下の点です。
・.on(...)に関数を指定する時点で、関数が存在しているような順番にすること
・formを使用しない場合、パラメーターも自分で渡す必要があります。
JavaScript から input要素の入力内容を文字列として取得し、$.ajax(...) を実行ときに値を与えることになります。
・必要に応じて、画面内の要素の表示 / 非表示を切り替えることになるかもしれません。(検索前はテーブルを表示しない場合など)
もしくは検索結果のテーブルをまるごと JavaScript を使って生成するのも手です。
・遷移しないということは URL が変わりません。
それが嫌なら、 URL を切り替える処理をまた別に行うことになります。
結構ボリュームのある内容なので、必要なら別質問がいいと思います。
投稿2015/11/04 09:48
総合スコア790
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/11/04 10:24