如何从搜索按钮发布 json？答案

【问题标题】：How to post json from a search button?如何从搜索按钮发布 json？
【发布时间】：2017-03-08 19:05:40
【问题描述】：

我创建了一个个人 JSON 文件，当我看到 consolo.log 时我可以看到它正在工作，但是我如何通过搜索按钮在浏览器上发布？我找不到一个很好的解释。我必须在下面这 4 个地方连续显示 4 个小 div。用户只能搜索“places”这个词，我必须打印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
    }
]

}

【问题讨论】：

您的意思是用户输入一个地点并向您的 test.json 发出 ajax 请求并显示相关地点的详细信息？
我创建了 json 文件，所以我想通过搜索按钮正确显示所有内容，在我的情况下，用户只能搜索地点
复制并测试代码jsfiddle.net/vncxfx0s/22
我的朋友！！！！非常感谢！！！它工作......实际上工作但我如何在输入框中搜索“地点”时显示结果，因为像这样它们总是被显示
很高兴为您提供帮助，如果有任何问题，请在下面发表评论。

标签： jquery arrays json post

【解决方案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>

【讨论】：

抱歉还是个问题，如果我搜索地点，我希望它们显示出来
抱歉详细说明
无论我在哪里搜索，他们都会出来！我想看看我的 json 文件，只要我搜索单词 places please
是的，您的意思是一个地方或相关的地方，而不是所有地方。那就是我在上面指出的，所以好吧。
mmmm 不是真的......我总是希望它们在我在搜索框中写下地点时显示出来，否则会出现一些我正在寻找的东西不存在的警告消息

【解决方案2】：

在你的 HTML 中创建一个元素并给它一个 id。然后当你的 Ajax 返回你的 json 文件的内容时，用 id 更改元素的 innerhtml。

【讨论】：

谢谢，请问可以举个实际的例子吗？

【解决方案3】：

为了在表单中包含 JSON 值，您需要将其存储在表单元素中。此外，由于所有这些 JSON 在表单中都是单个值，因此需要将其序列化为单个字符串。

在表单中添加表单元素：

<input type="hidden" name="someName" id="someId" />

然后设置它的值：

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

【讨论】：