javascript - Ajax-如何显示json数据

Question

我正在尝试正确显示 json 数据。我已经运行了所有数据，但无法正确显示它们。

如何附加名称、图像和网址，以便它们显示如下:

<div>name</div>
<img src="url from jason goes here">
<a href="url">url of page</a>

$(function(){
	$.ajax({
		url: "https://api.github.com/search/repositories?q=stars",
		method: "GET",
		success: function(data) {
			//console.log(data);
			//$(".git-user").html(JSON.stringify(data));

			$.each(data.items, function(i, items) {
				$("#name").append(items.name);
				$("#image").append(items.owner.avatar_url);
				$("#repo").append(items.html_url);
			});
		},
		error: function() {
			console.log(data);
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="git-user">
	<div id="name"></div>
	<div id="image"></div> 
	<a href="#" id="repo"></a>
</div>

Answer 1

您必须为正在加载的每一项项目生成一个容器。下面是有关如何执行此操作的示例代码，我希望这能引导您走向正确的方向。

        $.each(data.items, function(i, items) {
            var html_to_append = '<div class="git-user"><div class="name">'+items.name+'</div><div class="image">'+items.owner.avatar_url+'</div><a class="repo">'+items.html_url+'</a></div>';
           $('#items-container').append(html_to_append);
        });

对于此解决方案，您还应该更改 id 以将它们作为类，因为您可能拥有的不仅仅是一个类。

这将是显示项目的模板:

<div class="git-user">
  <div class="name"></div>
  <div class="image"></div> 
  <a href="#" class="repo"></a>
 </div>

这就是你的 html 的样子(它将被上面的内容填充):

<div id="items-container"></div>