ajax 加载 json 输出

在现代的 Web 开发中，我们经常需要使用 Ajax 技术来实现页面的异步加载，提升用户体验。而 json 是一种轻量级的数据交换格式，可以被广泛地应用于 Web 开发中。如何使用 Ajax 加载 json 数据并进行输出呢？下面将简单介绍。

首先，我们需要使用 Ajax 技术从后台获取 json 数据。获取数据后，我们可以将其存储在一个变量中：

var data; // 存储 json 数据
$.ajax({
  type: "GET",url: "data.json",dataType: "json",success: function(response){
    data = response;
  }
});

这里使用了 jQuery 中的 ajax 函数，并指定了请求的类型、url、数据类型以及成功后的回调函数。注意，在请求成功后，我们将获取到的数据存储在了 data 变量中。

接下来，我们可以使用循环语句将 json 数据逐一输出。这里以使用 jQuery 的 each 方法为例：

var htmlStr = ''; // 存储输出的 html 字符串
$.each(data,function(key,value){
  htmlStr += '<li>' + value.name + '</li>';
});
$('#myList').html(htmlStr);

这里使用了 each 方法遍历了 data 变量中的每一项，并将其输出到了一个名为 myList 的 ul 元素中。需要注意的是，在循环过程中，我们可以使用 JSON 对象属性的方式获取到相应的属性值。

最后，我们对以上两段代码进行整合，得到完整的代码如下：

var data;
$.ajax({
  type: "GET",success: function(response){
    data = response;
    var htmlStr = '';
    $.each(data,value){
      htmlStr += '<li>' + value.name + '</li>';
    });
    $('#myList').html(htmlStr);
  }
});

这样，我们就可以通过 Ajax 加载 json 数据并进行输出了。