如何将对象从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中。

Answer 2

不要将HTML标记放在JavaScript代码中。 将所有HTML代码放在容器中

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

现在填充ajax成功函数中的数据。

$(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").find("#login").text(data.login);
            $(".container").find("#id").text(data.id);
            $(".container").find("#avatar_url").text(data.avatar_url);
           // ...
        }
   });
});
});

Answer 3

您无法以字符串模式访问对象数据。 您需要结束字符串以附加对象中的内容，如下所示：

 console.clear(); var datas = { "login": "iwenyou", "id": 20179472, "avatar_url": "https://avatars.githubusercontent.com/u/20179472?v=3", "gravatar_id": "", "url": "https://api.github.com/users/iwenyou", "html_url": "https://github.com/iwenyou", "followers_url": "https://api.github.com/users/iwenyou/followers", "following_url": "https://api.github.com/users/iwenyou/following{/other_user}", "gists_url": "https://api.github.com/users/iwenyou/gists{/gist_id}", "starred_url": "https://api.github.com/users/iwenyou/starred{/owner}{/repo}", "subscriptions_url": "https://api.github.com/users/iwenyou/subscriptions", "organizations_url": "https://api.github.com/users/iwenyou/orgs", "repos_url": "https://api.github.com/users/iwenyou/repos", "events_url": "https://api.github.com/users/iwenyou/events{/privacy}", "received_events_url": "https://api.github.com/users/iwenyou/received_events", "type": "User", "site_admin": false, "name": null, "company": null, "blog": null, "location": "SF Bay Area", "email": null, "hireable": null, "bio": "A crawling programer...", "public_repos": 3, "public_gists": 0, "followers": 0, "following": 0, "created_at": "2016-06-28T04:45:54Z", "updated_at": "2016-07-10T03:47:33Z" } var output = "<div>" + datas['avatar_url'] + " | " + datas.login + "</div>"; console.log(output); document.write(output); 

Answer 4

试试这个

$(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>");
        }

      });


    });

});

Answer 5

$(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>");
                }

              });


            });

        });

Answer 6

你可以试试这个： -

$(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>");
                                }
                            }

                        });


                    });

                });

https://jsfiddle.net/zt2j1h3a/2/