jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例

下面是实现请求JSON格式数据并渲染到HTML页面的完整攻略：

1. 准备工作

首先，我们需要在HTML页面中引入 jQuery 库，可以通过CDN链接或者下载到本地并引入。

然后，我们需要创建一个用来渲染数据的HTML元素，比如一个列表，例如：

<ul id="list"></ul>

2. 请求JSON数据

接下来，我们需要通过Ajax请求获取JSON格式的数据。假设JSON数据的地址为 /api/data，我们可以使用下面的代码来进行请求：

$.ajax({
  url: '/api/data',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, textStatus, error){
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

这个代码块中，我们使用jQuery的 ajax 函数发送了一个 GET 请求到 /api/data，并且指定了 dataType 为 json，这样我们就可以获得一个 JavaScript 对象格式的 JSON 数据。

如果请求成功，success 回调函数会得到返回的数据，这里我们使用 console.log 来打印出来，你可以通过这种方式查看控制台中是否有数据返回。

如果请求失败，error 回调函数会被执行，你可以使用 console.log 来查看失败信息。

3. 渲染数据

我们已经获得了 JSON 数据，接下来就是把数据渲染到 HTML 页面中。

$.ajax({
  url: '/api/data',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    // 遍历数据，生成HTML代码
    var html = '';
    $.each(data, function(index, item) {
      html += '<li>' + item.name + '</li>';
    });
    // 将HTML代码插入到页面中
    $('#list').html(html);
  },
  error: function(xhr, textStatus, error){
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

这段代码使用了 $.each 方法遍历 JSON 数据中的每个元素，根据元素的内容生成 HTML 代码，最后再把生成的 HTML 插入到之前准备好的列表元素中。

通过以上步骤，我们就可以实现请求 JSON 格式数据并渲染到 HTML 页面了。

示例说明

下面提供两个示例：

示例1：请求GitHub API并渲染数据

$.ajax({
  url: 'https://api.github.com/users/happypeter',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var html = '';
    html += '<li>Name: ' + data.name + '</li>';
    html += '<li>Blog: ' + data.blog + '</li>';
    html += '<li>Location: ' + data.location + '</li>';
    html += '<li>Public Repos: ' + data.public_repos + '</li>';
    $('#list').html(html);
  },
  error: function(xhr, textStatus, error){
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

这个示例向 GitHub API 发送了一个请求，获取用户 happypeter 的信息，并且从返回的 JSON 数据中提取了几个信息，然后渲染到了页面上。

示例2：请求静态JSON文件并渲染数据

假设我们有一个静态的 data.json 文件，它的内容如下：

[
  {"name": "James", "age": 28},
  {"name": "Lucy", "age": 26},
  {"name": "Tony", "age": 30},
  {"name": "Bob", "age": 25},
  {"name": "Mary", "age": 24}
]

然后我们可以使用下面的代码进行请求和渲染：

$.ajax({
  url: 'data.json',
  type: 'GET',
  dataType: 'json',
  success: function(data) {
    var html = '';
    $.each(data, function(index, item) {
      html += '<li>' + item.name + ', ' + item.age + ' years old' + '</li>';
    });
    $('#list').html(html);
  },
  error: function(xhr, textStatus, error){
    console.log(xhr.statusText);
    console.log(textStatus);
    console.log(error);
  }
});

这个示例中，我们直接请求了 data.json 文件，并从中提取了每个对象中的 name 和 age 字段，最后渲染到页面中。