ajax 下载 json

Ajax 是一种在不重新加载整个页面的情况下更新页面的技术。使用 Ajax，我们可以在后台异步加载数据，前端页面无需等待数据返回就可以继续展示其他信息。在前端开发中，我们经常需要从后台获取数据，然后将数据展示在页面上。本文将介绍如何使用 Ajax 从后台下载 JSON 数据。

我们使用 jQuery 来实现 Ajax 下载 JSON。首先，我们需要在 HTML 文件中引入 jQuery：

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

然后，我们可以使用 jQuery 的 $.get() 方法来下载 JSON 数据。在这个方法中，我们需要传入 URL 和一个回调函数，用来处理下载的数据。

<script>
  $.get("data.json",function(data) {
    // 处理下载的数据
    console.log(data);
  });
</script>

上面的代码会下载一个名为 data.json 的 JSON 文件，并将其打印在控制台上。如果需要在页面上显示下载的数据，可以将数据渲染到 HTML 中：

<script>
  $.get("data.json",function(data) {
    // 处理下载的数据
    console.log(data);
    
    // 渲染数据到 HTML 中
    var html = "<ul>";
    data.forEach(function(item) {
      html += "<li>" + item.name + " - " + item.age + "</li>";
    });
    html += "</ul>";
    $("#data").html(html);
  });
</script>

<div id="data"></div>

上面的代码会将下载的 JSON 数据渲染成一个无序列表，并将其展示在页面上。

Ajax 下载 JSON 数据是前端开发常用的技术之一。通过使用 Ajax，我们可以异步下载数据，减少页面加载时间，并提升用户体验。