Question

寻找有关将JSON文件信息传递给HTML的脚本的一些指导。 HTML将成为单个页面，但使用jQuery Mobile创建多页面效果。在第一页上，我只想显示每个人的姓名，然后当您点击该人时，该人员的信息将显示在第二页上。我是JSON的新手，似乎无法控制住这个脚本。

HTML文件：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("Name must be filled out");
        return false;
    }
}

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

JSON文件：（实际文件中有更多人）

<!--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>

Answer 1

这假设您已经将JSON作为对象数组，因为我无法从您的部分JSON中分辨出它的格式。这里是 PLUNKER < / p>

段

<!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>

用于在HTML和JSON之间进行交互的脚本帮助

1 个答案:

段