Javascript 使用AJAX和JQUERY一次填充一个div_Javascript_Html_Ajax_Json

Javascript 使用AJAX和JQUERY一次填充一个div

javascript html ajax json

Javascript 使用AJAX和JQUERY一次填充一个div,javascript,html,ajax,json,Javascript,Html,Ajax,Json,我有一个json文件，如下所示： [ { "name": "Joe" }, { "name": "Chloe" }, { "name": "DeShawn" }, { "name": "Carol" }, { "name": "Dane" }, { "name":

我有一个json文件，如下所示：

    [
      {
       "name": "Joe"
      },

      {
       "name": "Chloe"
      },

      {
       "name": "DeShawn"
      },

      {
       "name": "Carol"
      },

      {
       "name": "Dane"
      },

      {
       "name": "Samantha"
      },
    ]

每次单击HTML中的按钮时，我都希望用

“name”

填充

id=“names”

<!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();

var xhr=new-XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
如果（xhr.readyState==4&&xhr.status==200）{
var name=JSON.parse（xhr.responseText）；
var statusHTML='”；
对于（var i=0；iSo，要从列表中显示随机名称吗？获取数据并将单击事件处理程序绑定到按钮。保留索引变量（例如index
）从0
开始。每次单击按钮时，您都会从数据中获得索引
的第四项，并递增索引
。请思考您想对列表的末尾做些什么。