如何将对象从JSON追加到HTML中的div？

Question

我一直在尝试从Github用户配置文件中获取JSON并在虚拟数据库中发布然后将"image","用户名"和"真实姓名"以及由jQuery创建的div显示为html中的div.

但我坚持将我的对象从JSON追加到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中.