ajax json添加列表

在Web开发中，我们经常需要通过AJAX向服务器请求数据，并将这些数据以列表的形式展现在网页上。本文将介绍如何使用JSON数据格式和AJAX技术实现添加列表功能。

首先，我们需要准备服务器端数据。假设我们的数据是一组国家名称和对应的首都信息。我们可以将数据保存在一个JSON文件中。该文件的格式如下：

{
  "countries": [
    {"name": "China","capital": "Beijing"},{"name": "United States","capital": "Washington D.C."},{"name": "France","capital": "Paris"}
  ]
}

接下来，我们需要编写前端HTML代码。在页面中创建一个用于显示数据的列表元素。示例如下：

<ul id="country-list">
  <li>China - Beijing</li>
  <li>United States - Washington D.C.</li>
  <li>France - Paris</li>
</ul>

注意，该列表元素的id属性的值为“country-list”，这是我们稍后在JavaScript代码中需要用到的。

最后，我们需要使用JavaScript编写AJAX和JSON解析代码。在页面底部添加以下代码：

<script>
  var xhr = new XMLHttpRequest();
  var url = "countries.json";

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var data = JSON.parse(xhr.responseText);
      var list = document.getElementById("country-list");

      for (var i = 0; i < data.countries.length; i++) {
        var country = data.countries[i];
        var listItem = document.createElement("li");
        listItem.innerText = country.name + " - " + country.capital;
        list.appendChild(listItem);
      }
    }
  };

  xhr.open("GET",url,true);
  xhr.send();
</script>

该代码会向“countries.json”文件发起AJAX请求，并将返回的JSON格式数据解析为JavaScript对象。然后，我们遍历该对象中的所有国家信息，为列表元素创建新的列表项，并将其添加到页面中。

至此，我们已经成功地使用AJAX和JSON技术实现了在页面上显示国家列表的功能。