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

Question

我一直在尝试从 Github 用户配置文件中获取 JSON 并在虚拟数据库中发布，然后将“图像”、“用户名”和“真实姓名”与 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

不要在 JavaScript 代码中放置 HTML 标签。 将所有 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 2

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

最后，也是最重要的一点，您需要将您创建的 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 3

你可以试试这个：-

$(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/

Answer 4

$(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 5

试试这个

$(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 6

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

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);