搜索JSON并在HTML页面中显示结果

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端数据传输和存储。它以易于阅读和编写的文本格式表示结构化数据，通常由键值对组成。

JSON的优势包括：

简洁性：JSON使用简洁的语法表示数据，易于理解和编写。
可读性：JSON采用文本格式，便于人类阅读和调试。
跨平台：JSON是一种独立于编程语言和操作系统的数据格式，可以在不同平台之间进行数据交换。
易于解析：JSON数据可以轻松地被解析和转换为各种编程语言中的对象。

在HTML页面中显示JSON结果的方法有多种，以下是一种常见的方法：

使用JavaScript的fetch API或XMLHttpRequest从服务器获取JSON数据。
使用JavaScript的JSON.parse()方法将JSON字符串解析为JavaScript对象。
使用JavaScript操作DOM，将解析后的数据动态地插入到HTML页面中。

以下是一个示例代码，演示如何搜索JSON并在HTML页面中显示结果：

<!DOCTYPE html>
<html>
<head>
  <title>JSON搜索结果</title>
</head>
<body>
  <input type="text" id="searchInput" placeholder="输入搜索关键字">
  <button onclick="searchJSON()">搜索</button>
  <div id="resultContainer"></div>

  <script>
    function searchJSON() {
      var searchKeyword = document.getElementById("searchInput").value;
      var jsonData = {
        "employees": [
          { "firstName": "John", "lastName": "Doe" },
          { "firstName": "Anna", "lastName": "Smith" },
          { "firstName": "Peter", "lastName": "Jones" }
        ]
      };

      var resultContainer = document.getElementById("resultContainer");
      resultContainer.innerHTML = ""; // 清空之前的结果

      for (var i = 0; i < jsonData.employees.length; i++) {
        var employee = jsonData.employees[i];
        if (employee.firstName.toLowerCase().includes(searchKeyword.toLowerCase()) ||
            employee.lastName.toLowerCase().includes(searchKeyword.toLowerCase())) {
          var fullName = employee.firstName + " " + employee.lastName;
          var resultElement = document.createElement("p");
          resultElement.textContent = fullName;
          resultContainer.appendChild(resultElement);
        }
      }
    }
  </script>
</body>
</html>

在这个示例中，我们创建了一个简单的HTML页面，包含一个输入框和一个按钮用于搜索。当用户点击搜索按钮时，JavaScript函数searchJSON()会被调用。

searchJSON()函数首先获取用户输入的搜索关键字，并定义了一个示例的JSON数据。然后，它遍历JSON数据中的每个员工对象，检查名字是否包含搜索关键字。如果匹配成功，就创建一个<p>元素，并将员工的全名插入到该元素中。最后，将结果元素添加到页面中的<div>容器中。

搜索JSON并在HTML页面中显示结果

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐