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

【问题标题】：Script help for interacting between HTML and JSONHTML 和 JSON 之间交互的脚本帮助
【发布时间】：2016-08-06 18:38:48
【问题描述】：

寻找一些关于将 JSON 文件信息传递到 HTML 的脚本的指导。 HTML 将是一个单页，但使用 jQuery Mobile 来创建多页效果。在第一页上，我希望只显示每个人的姓名，然后当您单击该人时，该人的信息将显示在第二页上。我是 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 新手，所以我不确定最好的方法。目前只是像 js 一样调用文件我已经看到将 JSON 数据作为 js 文件中的变量的方法。

标签： javascript jquery html json jquery-mobile

【解决方案1】：

这是假设您已经将 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>

【讨论】：

这就是我想要的。是否可以将名称创建为列表项而不仅仅是href。其次，只有一个页面，当你点击一个名字时，它只会将信息添加到点击的人的第二页，而不是像我有大约 50-60 人那样创建多个页面。
是的：out += '<li><a href="' + arr[i].name + '" id="' + arr[i].id + '">' + arr[i].name + '</a></li>'; 关于第二个查询，您的意思是您希望每次点击都成为第二页的累积结果吗？（例如，您再次（意外）单击 Mary、John、Doug 和 Mary，结果第二页上的信息是：Mary、John 和 Doug）
我希望你点击 Mary 它会在第二页上显示 Mary 的信息然后返回按钮带你回到主页（我有那个返回按钮工作）然后您选择列表中的其他人并冲洗并为其他任何人重复，但为被点击的人重写第二页上的信息
我更新了Plunker，添加了一个与前两个联系人截然不同的联系人。前 2 个联系人看起来确实非常相似，或者您是否尝试过这些示例？
我只是将链接更改为嵌套在列表项中的链接，jQM 将其变成了一个不错的目录。片段也更新了。