javascript - 通过ajax获取json数据

Question

我问的问题是一个基本问题，因为我是 json 和 ajax 新手。

所以我有一个name、task、date和status的json数据我通过ajax获取数据，但它没有显示在我的页面上。

我的ajax代码是这样的:

$(document).ready(function(e) {     
    // Using the core $.ajax() method
    $.ajax({
        url: "getdata.php",
        type: "GET",
        dataType : "json",
        success: function( json ) {
            $( "<h1/>" ).text( json.name ).appendTo( "body" );
            $( "<div class=\"content\"/>").html( json.task ).appendTo( "body" );
        },
        complete: function( xhr, status ) {
            alert( "The request is complete!" );
        }
    }); 
});

这是我的 json 数据:

[
  {"name":"Usman ","task":"Getting work","date":"27-07-2014 12:28:45 PM","status":"1"},
  {"name":"Hamza","task":"Starting work","date":"27-07-2014 12:29:36 PM","status":"1"},
  {"name":"Hamza","task":"Geted","date":"27-07-2014 2:04:07 PM","status":"1"},
  {"name":"Hamza","task":"Start work","date":"02-08-2014 3:56:37 PM","status":"1"}
]

我不知道为什么它没有附加 html 数据，但它显示完整的警报。

我添加了 fiddle ，即使它不起作用。

Fiddle

Answer 1

好吧，我看到你确实取得了成果，所以我猜你确实取得了成功。不过你确实有一个缺陷。您正在尝试直接访问属性，但您的 json 是对象数组而不是对象。

您需要进行 foreach 迭代。

json.forEach(function (entry) {
    $( "<h1/>" ).text( entry.name ).appendTo( "body" );
    $( "<div class=\"content\"/>").html( entry.task ).appendTo( "body" );
});