jsonを検索ボタンから投稿するには？

Question

私は個人的なJSONファイルを作成しました。私が見ることができるconsolo.logが動作していますが、検索ボタンからブラウザにどのように投稿できますか？ 私はこれについて良い説明を見つけることができません。 私は4つの小さいdivsをこれらの4つの場所で一列に表示する必要があります。 ユーザーは唯一の "場所" という単語を検索することができますし、私はplaces.name、places.imgage_urls、places.location_name、places.day_priceを印刷する必要があり、places.review_count

ここ

私のコード：

<form> 
<input type="text" name="search" placeholder="Find a place to work.."> 
<input id="submit" type="submit" name="subtim" value="Search"> 
</form> 

`<div id="results"></div>` 

jQueryの

$.getJSON("../test.json", function(data) { 
console.log(data); 
}); 

$.ajax({ 
    url: "../test.json", 
    dataType: "json", 
    type: "get", 
    cache: false, 
    success: function(data) { 
     console.log(data); 
     $(data.places).each(function(index, value){ 
      console.log(value); 
     }); 
    } 
}); 

JSON

{ 
"places": [ 
    { 
     "id": 1, 
     "name": "HNK Flexplek", 
     "imgage_urls": "https://d2h37djvgj7smg.cloudfront.net/0b4a33ef924631441bc371646c6c3830592c746d/18995.600x400x16919.jpg", 
     "location_name": "HNK Amsterdam Houthavens", 
     "day_price": 175, 
     "review_count": 11 
    }, 
    { 
     "id": 2, 
     "name": "Harrods", 
     "imgage_urls": "https://d2h37djvgj7smg.cloudfront.net/4efa8f4624286e1890bdcfc82e9dfb06ccfb77ad/9492.600x400x16919.jpg", 
     "location_name": "Het Warenhuis", 
     "day_price": 200, 
     "review_count": 4 
    }, 
    { 
     "id": 3, 
     "name": "V2", 
     "imgage_urls": "https://d2h37djvgj7smg.cloudfront.net/cd6dfff88114b71ada941ff4e004b0cf143fdb3e/18996.600x400x16919.jpg", 
     "location_name": "HNK Amsterdam Houthavens", 
     "day_price": 260, 
     "review_count": 13 
    }, 
    { 
     "id": 4, 
     "name": "LaFayette", 
     "imgage_urls": "https://d2h37djvgj7smg.cloudfront.net/6f5a44425fd3892f70755fed536885e0476fc6b8/2328.600x400x16919.jpg", 
     "location_name": "Het Warenhuis", 
     "day_price": 150, 
     "review_count": 0 
    } 
] 

}

Answer 1

$("#find_place").submit(liveSearch); 
 
$("[name=search]").on("keyup",liveSearch); 
 
function liveSearch(){ 
 
var inp = $("[name=search]").val().toLoweCase(); 
 

 
$.ajax({ 
 
    url: "../test.json", 
 
    dataType: "json", 
 
    type: "get", 
 
    cache: false, 
 
    success: function(data) { 
 
     console.log(data); 
 
     $.each(data.places, function(i, v){ 
 
if(v.name.toLoweCase().indexOf(inp)>-1 || v.name.toLoweCase() == inp){ 
 
     $("results").append("<div id='place"+v.id+"' class='place'>"+ 
 
+"<h3>"+v.name+"</h3>" 
 
+"<h5>"+v.location_name+"</h5>" 
 
+"<img alt='"+v.location_name+"' title='"+v.location_name+"' src='"+v.imgage_urls+"'></img>" 
 
+"<span>Day Price: "+v.day_price+"</span>" 
 
+"<span>Review count: "+v.review_count+"</span>" 
 
+"</div>"); 
 
} 
 
     }); 
 
    } 
 
}) 
 
return false; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id='find_place'> 
 
<input type="text" name="search" placeholder="Find a place to work.."> 
 
<input id="submit" type="submit" name="subtim" value="Search"> 
 
</form> 
 

 
<div id="results"></div>

Answer 2

HTMLに要素を作成し、idを付けます。そして、あなたのAjaxがあなたのjsonファイルの内容を返すとき、そのidで要素のinnerhtmlを変更してください。

Answer 3

フォームにJSON値を含めるには、フォーム要素にJSON値を格納する必要があります。さらに、そのJSONはすべてフォーム内の単一の値になるため、1つの文字列にシリアライズする必要があります。

フォーム内のフォーム要素を追加します。

$.getJSON("../test.json", function(data) { 
    $('#someId').val(JSON.stringify(data)); 
});