ページ先のJSON表記をテーブルに変更する方法
---目的---
検索ボタンを押し、画面遷移先のJSON表記をテーブルにコンバートしたい。
---現状---
画面遷移した場合JSON表記のまま表示される。
---補足---
手探りで始めましたが、そもそも画面遷移先にはJSやjQueryの影響を与えることは出来ないのか、もしくはやり方が間違っているのかの質問です。
JSを一つのファイルにまとめてはいますが、それぞれ動作確認はとれています。
---環境---
WEBアプリ作成中でHTML、JS、Javascriptを使用しています。
//サジェスト機能、スニペットでは確認はとれないかと思いますが、問題なく作動。
$(document).ready( function() {
$("#ac2").autocomplete({
source: function(req, resp){
$.ajax({
url: "http://127.0.0.1:8180/api/stockcars/keyword",
type: "GET",
cache: false,
dataType: "json",
data: {
car_name : req.term
},
success: function(o){
resp(o);
},
error: function(xhr, ts, err){
resp(['']);
}
});
}
});
//JSON表記をテーブル変換。画面遷移先に関連付けできない。
$.ajax({
type: 'POST',
url: 'http://localhost:8180/api/stockcars/search?q=',
dataType: 'json',
jsonpCallback: 'data',
success: function(json){
var rows = "";
$.each(json, function(i, item){
$.each(item,function(key,value){
rows += "<tr>";
rows += "<td>";
rows += key;
rows += "</td>";
rows += "<td>";
rows += value;
rows += "</td>";
});
});
//テーブルに作成したhtmlを追加する
$("#tbl").append(rows);
}
});
});
<!DOCTYPE HTML>
<HTML>
<head>
<link rel="stylesheet" href="./css/jquery-ui.min.css">
<script src="./js/jquery.js" charset="UTF-8"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./js/jquery-ui.js" charset="UTF-8"></script>
<script src="js/Suggest.js"></script>
</head>
<body>
<form method="get"action="http://localhost:8180/api/stockcars/search?q=" Accept-charset="UTF-8" onsubmit="doSomething();return false;">
<input type="text" id="ac2" name="car_name" >
<input type="submit" onclick="return test()" value="検索"></form>
</body>
</HTML>