javascript - 如何将对象从 JSON append 到 HTML 中的 div？

Question

我一直在尝试从 Github 用户配置文件中获取 JSON 并在虚拟数据库中发布，然后将“图像”、“用户名”和“真实姓名”与 jQuery 创建的 div 一起显示到 html 中的 div 中。

但我坚持将我的对象从 JSON append 到 div。我知道我弄错了格式，但我不知道正确的格式，有人可以帮我吗？谢谢!

这是 Javascript 和 HTML:

$(document).ready(function() {
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) {
    $.ajax({
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) {
        $(".container").append("<div>datas['avatar_url']+datas.login+datas.name</div>");
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

Answer 1

首先，您在 $.ajax 回调中定义的参数是 data，而不是 datas，您尝试访问的属性是在响应的 form 对象中，因此您需要使用 data.form 来访问它们。

最后，也是最重要的，您需要将您创建的 HTML 字符串与检索到的对象的值连接在一起。试试这个:

$(document).ready(function() {
  var datas = $.get("https://api.github.com/users/iwenyou", function(infos) {
    $.ajax({
      type: "POST",
      url: "https://httpbin.org/post",
      data: infos,
      dataType: "json",
      success: function(data) {
        $(".container").append('<div>' + data.form.avatar_url + '</div><div>' + data.form.login + '</div><div>' + data.form.name + '</div>');
      }
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

请注意，name 属性在响应中为空，因此它不会出现在生成的 HTML 中。