在 HTML 中嵌入来自搜索的 JSON答案

【问题标题】：Embedd JSON from search in HTML在 HTML 中嵌入来自搜索的 JSON
【发布时间】：2017-02-06 14:05:33
【问题描述】：

我有一个以 json 响应的搜索。我想要的是，JSON 包含在我的 HTML 中而不显示在浏览器中

当我访问我的网站 www.XXX.com/search/keyword 时，它会以这个 json 响应：

{
"items": [{
    "id": 12345,
    "name": "cool name",
    "title": "title of the object",
    "vendor": "vendor name"
}

等等（只是一个例子）

我的 HTML 如下所示：

<form name="test" action="/" id="form"/>
  <input type="text" id="keyword" placeholder="search">
  <input type="submit" value="search">
</form>

然后我从表单中读取值并将其包含在我的 JS 操作中：

<script type="text/javascript">
  var $action = document.getElementById("keyword").value;
  document.getElementById("form").action = 'www.XXX.com/search/' + $action;
</script>

但现在它在我的浏览器中显示了 JSON。我想要的是在我的 HTML 中包含 JSON 并显示值。如何从 www.XXX.com/search/keyword 获取 JSON 并将其列在我的视图中？

最好的问候和感谢

【问题讨论】：

标签： javascript jquery html json search

【解决方案1】：

您需要执行 AJAX 请求来解决此任务。这意味着您必须异步提交表单，当请求完成时，它会给您一个响应，您必须将其插入页面中的某个位置。

我不知道你有什么要求，但是使用 JQUERY 框架你可以做这样的事情：

$.getJSON('www.XXX.com/search/'+ document.getElementById("keyword").value, function(data){
//data is your JSON that you receive
document.getElementById("Id_of_where_to_insert_in_html").innerHtml(data);

//Or you can do something with the data, like parsing , building html dinamically etc.
});

此外，您可以使用 JQUERY-UI 和 Autocomplete Widget 在关键字文本字段中写入时获得建议

【讨论】：