简单的 Jquery Ajax 获取 JSON 数据函数答案

【问题标题】：Simple Jquery Ajax Get JSON data function简单的 Jquery Ajax 获取 JSON 数据函数
【发布时间】：2015-03-20 10:09:56
【问题描述】：

我正在尝试创建一个简单的小 jquery 函数，该函数从 url 中提取 JSON 数据，然后遍历每个对象。我要做的就是控制台记录 object.name 以便我知道它正在工作。到目前为止它不起作用:(我检查了 Chrome 开发者控制台中的网络选项卡，并在响应中显示返回了 json 数据。问题是我无法将 object.name 获取到 console.log。如果有人可以帮忙指出问题，我会很高兴的。

这是脚本：

function getJSON(){
            $.ajax({
                type: 'GET',
                url: '/api/data.json',
                success: function(data){
                    $.each(data, function(index, object){
                        console.log(object.name);
                    });
                }
            });
        }
getJSON();

这是 JSON 数据：

[
	{
		id: 1,
		name: "Greg",
		lastname: "Sugaro",
		school: "Georgia Tech"

	},
	{
		id: 2,
		name: "Mike",
		lastname: "Wilder",
		school: "UGA"
	}
]

【问题讨论】：

在每次调用之前做一个console.log(data)，看看它是否被调用...还要检查你的浏览器控制台，看看是否记录了任何错误
@ Arun ：我在 $.each 之前尝试了 console.log(data) 并且没有输出任何内容。 Bowser 控制台中没有记录任何错误。
@Toshi 尝试在 success 之后将 complete: function(xhr, status){ console.log(status); } 添加到您的 ajax 调用中。
试试`$.getJSON('/api/data.json',function(data){ console.log(data); }) `
数据是JSON 吗？ id、name、lastname、school 应该用双引号括起来吗？ ; "id"，"name"，"lastname"，"school"？见stackoverflow.com/questions/8294088/javascript-object-vs-json，benalman.com/news/2010/03/theres-no-such-thing-as-a-json

标签： jquery ajax json

【解决方案1】：

当我使用你的 JSON 和 $.each 函数对我来说很好，这里是 FIDDLE

所以我猜你的 ajax 调用有问题 1. 任一返回类型不是 JSON 格式。 2.如果它的json使用 json.stringify(data)看内容

在之前的评论中，您提到“我在 $.each 之前尝试了 console.log(data)，但没有输出任何内容”，这意味着您的 ajax 调用没有返回任何响应。检查您的接听电话

【讨论】：

是的，我想可能就是这样。我将尝试对返回的数据进行字符串化...谢谢
我认为我可能需要将 JSON 数据转换为 javascript 对象？
我不确定，因为“Javascript 对象是 Javascript 中的一种数据类型 - 它仅在 Javascript 中才有意义”。但是“JSON 只是存储在字符串中”为了使其有用，可以解析 JSON 字符串以生成任何语言的对象。如果你对它没问题，请使用 javascript .....
@ Ashish451 - 谢谢。在这种情况下，我假设我应该使用 .parseJSON 将数据转换为 javascript 对象。

【解决方案2】：

试试这个：

 $.ajax({
   type: 'GET',
   url: '/api/data.json',
   success: function(data){
    objects = $.parseJSON(data)
    for(i=0; i<data.length; i++)
        console.log(objects[i].name);
     }
 });

【讨论】：

【解决方案3】：

SO....我让代码工作了！！见下文！

$(document).ready(function(){
            $('.button').click(function(){
                $.ajax({
                    type: 'GET',
                    url: '/api/data.json',
                    success: function(data){ 
                        console.log("success", data);
                        
                        $.each(data, function(index, object){
                            $('#data-div').append('<p>' + object.name + '</p>');
                        });
                    }
                });
            });
        });

【讨论】：