Javascript 如何在HTML中将JSON中的对象附加到div中？

我一直在尝试从Github用户配置文件中获取JSON，并在虚拟数据库中发布，然后将“image”、“user name”和“real name”以及jQuery创建的div显示在html中的div中

但是我一直在把JSON中的对象添加到div中。我知道我的格式错了，但我不知道正确的格式，有人能帮我吗？谢谢大家!

以下是Javascript和HTML：

$（文档）.ready（函数（）{
变量数据=$.get（“https://api.github.com/users/iwenyou，功能（infos）{
$.ajax({
类型：“POST”，
url:“https://httpbin.org/post",
数据：infos，
数据类型：“json”，
成功：功能（数据）{
$（“.container”）.append（“datas['avatar_url']+datas.login+datas.name”）；
}
});
});
});
无法以字符串模式访问对象数据。您需要结束字符串以附加对象中的内容，如下所示：


console.clear（）；
变量数据={
“登录”：“我有你”，
“id”：20179472，
“头像url”：https://avatars.githubusercontent.com/u/20179472?v=3",
“gravatar_id”：“，
“url”：”https://api.github.com/users/iwenyou",
“html_url”：”https://github.com/iwenyou",
“关注者url”：https://api.github.com/users/iwenyou/followers",
“以下url：”https://api.github.com/users/iwenyou/following{/other_user}“，
“gists_url”：https://api.github.com/users/iwenyou/gists{/gist_id}“，
“带星号的url”：https://api.github.com/users/iwenyou/starred{/owner}{/repo}“，
“订阅\u url”：https://api.github.com/users/iwenyou/subscriptions",
“组织\u url”：https://api.github.com/users/iwenyou/orgs",
“repos_url”：https://api.github.com/users/iwenyou/repos",
“事件\u url”：https://api.github.com/users/iwenyou/events{/隐私}“，
“收到的\u事件\u url”：https://api.github.com/users/iwenyou/received_events",
“类型”：“用户”，
“站点管理”：false，
“名称”：空，
“公司”：空，
“博客”：空，
“位置”：“旧金山湾区”，
“电子邮件”：空，
“可雇佣”：空，
“bio”：“爬行编程者…”，
“公共回购”：3，
“公共注册”：0，
“追随者”：0，
“以下”：0，
“创建时间”：“2016-06-28T04:45:54Z”，
“更新时间”：“2016-07-10T03:47:33Z”
}
var output=”“+datas['avatar_url']+“|”+datas.login+”；
控制台日志（输出）；
文件写入（输出）试试这个

$(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['avatar_url']+data.login+data.name +"</div>");
        }

      });


    });

});

$（文档）.ready（函数（）{
变量数据=$.get（“https://api.github.com/users/iwenyou",
功能（信息系统）{
$.ajax({
类型：“POST”，
url:“https://httpbin.org/post",
数据：infos，
数据类型：“json”，
成功：功能（数据）{
$（“.container”）.append（“+data['avatar_url']+data.login+data.name+”）；
}
});
});
});
首先，您在
$.ajax
回调中定义的参数是
数据
，而不是
数据
，您试图访问的属性位于响应的
表单
对象中，因此您需要使用
data.form
来访问它们

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


$（文档）.ready（函数（）{
变量数据=$.get（“https://api.github.com/users/iwenyou，功能（infos）{
$.ajax({
类型：“POST”，
url:“https://httpbin.org/post",
数据：infos，
数据类型：“json”，
成功：功能（数据）{
$（“.container”）.append（“”+data.form.avatar_url+“”+data.form.login+“”+data.form.name+“”）；
}
});
});
});
不要在JavaScript代码中放置HTML标记。
将所有HTML代码放入容器中，如

<div class="container">
    <div id="login"></div>
    <div id="id"></div>
    <div id="avatar_url"></div>
    ...
</div>

$（文档）.ready（函数（）{
变量数据=$.get（“https://api.github.com/users/iwenyou",
功能（数据）{
$.ajax({
类型：“POST”，
url:“https://httpbin.org/post",
数据：数据，
数据类型：“json”，
成功：功能（数据）{
$（“.container”）.append（“+data.form.avatar\u url+”
“+data.form.login+”
“+data.form.name+”
“+”）；
}
});
});
});
您可以尝试以下方法：-

$(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) {
                                if (data.hasOwnProperty('form')) {
                                    datas = data.form;
                                    $(".container").append("<div>Avatar URL : " + datas.avatar_url + "<br>Lodin : " + datas.login + "<br>Name : " + datas.name + "</div>");
                                }
                            }

                        });


                    });

                });

$（文档）.ready（函数（）{
变量数据=$.get（“https://api.github.com/users/iwenyou",
功能（信息系统）{
$.ajax({
类型：“POST”，
url:“https://httpbin.org/post",
数据：infos，
数据类型：“json”，
成功：功能（数据）{
if（data.hasOwnProperty（'form'））{
datas=data.form；
$（“.container”）.append（“化身URL:+datas.Avatar_URL+”
Lodin:+datas.login+”
Name:+datas.Name+”）；
}
}
});
});
});

你想实现什么目标？现在，您正在用固定文本追加一个div。试着给出一个json示例和预期的html代码段，
datas['avatar\u url']
呢
datas.login
和
datas.name
还返回
undefined
。
$(document).ready(function() {

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

              });


            });

        });

$(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) {
                                if (data.hasOwnProperty('form')) {
                                    datas = data.form;
                                    $(".container").append("<div>Avatar URL : " + datas.avatar_url + "<br>Lodin : " + datas.login + "<br>Name : " + datas.name + "</div>");
                                }
                            }

                        });


                    });

                });