HTML和JSON之间交互的脚本帮助

Script help for interacting between HTML and JSON

本文关键字：脚本 帮助 交互 之间 JSON HTML      更新时间：2023-09-26

正在寻找有关将JSON文件信息传递给HTML的脚本的一些指导。HTML将是一个单独的页面，但使用jQueryMobile来创建多页面效果。在第一页上，我只想显示每个人的名字，然后当你点击该人时，该人的信息就会显示在第二页上。我是JSON的新手，但似乎无法理解如何管理这个脚本。

HTML文件：

<!--first page -->
<div data-role="page" id="info-page">
  <div data-role="header" data-theme="b">
    <h1>Contacts</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="prof-list">
      <li data-role="list-divider" data-theme="b" role="heading">Names</li>
      <!-- List of all names from the JSON file listed here -->
    </ul>
  </div>
</div>
<!--second page -->
<div data-role="page" id="details-page">
  <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>
    <h1>Information</h1>
  </div>
  <div data-role="list-view">
    <!-- Information for person who was clicked on show here -->
  </div>
</div>

JSON文件：(实际文件上有更多人(

{
    "id": 0,
    "age": 31,
    "name": "Alex Jones",
    "email": "alexjones@gmail.com",
    "phone": "+1 (845) 575-2978"
}, {
    "id": 1,
    "age": 31,
    "name": "Alice Hollow",
    "email": "alicehollow@gmail.com",
    "phone": "+1 (829) 454-3806"
},

这是假设您已经将JSON作为对象数组，因为我无法从您的部分JSON中判断出它的格式。它位于PLUNKER中

摘录

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery Mobile Web App</title>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
</head>
<body>
  <div data-role="page" id="page">
    <div data-role="header">
      <h1>Page One</h1>
    </div>
    <div data-role="content">
      <ul data-role="listview">
        <li><a href="#page2">Page Two</a>
        </li>
        <li><a href="#page3">Page Three</a>
        </li>
        <li><a href="#page4">Page Four</a>
        </li>
      </ul>
      <ul data-role="listview" data-autodividers="true" data-filter="true" data-inset="true" id="prof-list">
        <li data-role="list-divider" data-theme="b" role="heading">Names</li>
        <!-- List of all names from the JSON file listed here -->
      </ul>
    </div>
  </div>
  <div data-role="footer">
    <h4>Page Footer</h4>
  </div>

  <div data-role="page" id="page2">
    <div data-role="header" data-theme="b"><a href="#" data-rel="back" data-role="button">Go back</a>
      <h1>Information</h1>
    </div>
    <div data-role="content">
      <table>
        <tr>
          <th>Name</th>
          <td id="dataName">&nbsp;</td>
        </tr>
        <tr>
          <th>Age</th>
          <td id="dataAge">&nbsp;</td>
        </tr>
        <tr>
          <th>Email</th>
          <td id="dataEmail">&nbsp;</td>
        </tr>
        <tr>
          <th>Phone</th>
          <td id="dataPhone">&nbsp;</td>
        </tr>
      </table>
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>
  <div data-role="page" id="page3">
    <div data-role="header">
      <h1>Page Three</h1>
    </div>
    <div data-role="content">
      Content
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>
  <div data-role="page" id="page4">
    <div data-role="header">
      <h1>Page Four</h1>
    </div>
    <div data-role="content">
      Content
    </div>
    <div data-role="footer">
      <h4>Page Footer</h4>
    </div>
  </div>
  <script>
    var contacts = [{
      "id": 0,
      "age": 31,
      "name": "Alex Jones",
      "email": "alexjones@gmail.com",
      "phone": "+1 (845) 575-2978"
    }, {
      "id": 1,
      "age": 31,
      "name": "Alice Hollow",
      "email": "alicehollow@gmail.com",
      "phone": "+1 (829) 454-3806"
    }, {
      "id": 2,
      "age": 99999,
      "name": "Lazerus",
      "email": "What is this EE-mall you speak of?",
      "phone": "Fown? I know not of this person."
    }];
    var listName = document.getElementById("prof-list");

    function displayNames(arr) {
      var out = "";
      var i;
      for (i = 0; i < arr.length; i++) {
        out += '<li><a href="' + arr[i].name + '" id="' + arr[i].id + '">' + arr[i].name + '</a></li>';
      }
      listName.innerHTML = out;
      listName.addEventListener('click', function(e) {
        e.preventDefault();
        if (e.target !== e.currentTarget) {
          var ID = parseInt(e.target.id, 10);
          document.getElementById('dataName').innerHTML = arr[ID].name;
          document.getElementById('dataAge').innerHTML = arr[ID].age;
          document.getElementById('dataEmail').innerHTML = arr[ID].email;
          document.getElementById('dataPhone').innerHTML = arr[ID].phone;
        }
      }, false);
    }
    displayNames(contacts);
  </script>
</body>
</html>

相关文章：