时间戳

首页 > 解决方案 > 如何在 Web 应用程序中使用 Firefox 的内置 json 查看器从 REST API 获取内容并将其呈现在搜索栏下方？

javascript - 如何在 Web 应用程序中使用 Firefox 的内置 json 查看器从 REST API 获取内容并将其呈现在搜索栏下方？

问题描述

我有一个简单的搜索栏，我可以在其中搜索文本并返回一个 json 数组作为后端服务器的输出。该请求是一个简单的获取请求。现在，我可以直接从 url 参数中查询，看到 Firefox 原生渲染的整个 json，但我真的很想有一个漂亮的搜索框。

我想知道是否有可能以某种方式将 Firefox 的本机 json 查看器的所有内置功能（如过滤）作为搜索栏下方的 Web 应用程序本身的一部分？

我试图搜索 Firefox 使用什么 js 库来实现这一点，但谷歌根本没有帮助。我得到的只是一堆我不想要的扩展。

现在这是我得到的 -

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>

body{
  background: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
}

.search {
  width: 50%;
  position: relative;
  display: flex;
  margin: auto;
}

.searchTerm {
  width: 100%;
  border: 3px solid #00B4CC;
  border-right: none;
  padding: 5px;
  height: 20px;
  border-radius: 5px 0 0 5px;
  outline: none;
  color: #9DBFAF;
}

.searchTerm:focus{
  color: #00B4CC;
}

.searchButton {
  width: 40px;
  height: 36px;
  border: 1px solid #00B4CC;
  background: #00B4CC;
  text-align: center;
  color: #fff;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}
</style>

<div>
   <div class="search">
      <input type="text" class="searchTerm" placeholder="What are you looking for?">
      <button id="button" type="submit" class="searchButton">
        <i class="fa fa-search"></i>
     </button>
   </div>
   <div id="result"></div>
</div>
</body>
<script>
    $(document).ready(function(){
        $("#button").click(function(){
            $.ajax({
            type: "GET",
            dataType: "jsonp",
            crossDomain: true,
            url: "https://jsonplaceholder.typicode.com/posts",
            success: function (result) {
                var div = document.getElementById("#result");
                console.log(result);
                div.textContent = result;
                div.html(result);
            }
        });
      });
    });
</script>
</html>

标签： javascripthtmljson

解决方案

推荐阅读