Question

我有一个像这样的json文件：

    [
      {
       "name": "Joe"
      },

      {
       "name": "Chloe"
      },

      {
       "name": "DeShawn"
      },

      {
       "name": "Carol"
      },

      {
       "name": "Dane"
      },

      {
       "name": "Samantha"
      },
    ]

每当我点击HTML中的按钮时，我想用id="names"填充"name"。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script src="js/action.js"></script>
    </head> 
    <body>
        <h1> Name randomizer </h1>  
        <div id= "container">
            <div id="names">
            </div>
            <button>Next name</button>
        </div>
    </body>
</html>

这是AJAX请求：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState === 4 && xhr.status === 200) {
   var names = JSON.parse(xhr.responseText);
   var statusHTML = '<ul class="bulleted">';
for (var i=0; i<names.length; i += 1) {

  statusHTML += '<li>';

  statusHTML += names[i].name;
  statusHTML += '</li>';
}
statusHTML += '</ul>';
document.getElementById('names').innerHTML = statusHTML;
  }
 };
  xhr.open('GET', 'data/names.json');
  xhr.send();

我怎样才能一次只显示一个名字？不像我上面那样列出？

一次使用AJAX和JQUERY填充div

0 个答案: