通过ajax获取json数据

Question

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

所以我有一个name , task , date and 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

Answer 1

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

您需要进行foreach尝试。

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

Answer 2

编辑你的Json

{
  "jsontext":[
    {"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"}
  ]
}

和ajax代码应为

$.ajax({
  url: '/getdata.txt',
  complete: function (data) {
    if (data.responseText != "") {
      var NewTxt = data.responseText;
      NewTxt = NewTxt.replace(/\n/g, "");
      NewTxt = NewTxt.replace(/\s/g, "");
      obj = JSON.parse(NewTxt);
      var NewStr = "";
      for (var i = 0; i < obj.jsontext.length; i++) {
        NewStr += obj.jsontext[i].name + "<br/>" + obj.jsontext[i].task + "<br/>" + obj.jsontext[i].date + "<br/>" + obj.jsontext[i].status + "<br/><br/>";
      }
      document.getElementById("demo").innerHTML = NewStr;
    }
  }
 });

和HTML为：

<div id="demo"></div>