如何通过jQuery AJAX调用使用JSON数据填充HTML表

时间:2012-07-16 09:54:07

标签: jquery html ajax json

我需要通过jQuery AJAX调用来填充带有JSON数据的表,

JSON数据的格式:

{"message":[
              {"name":"A","value":"7%"},
              {"name":"B","value":"3%"}
           ]}

任何人都可以帮忙找出这个AJAX调用的错误:

$.ajax({
         type : "GET",
         url : "",
         dataType : "json",
         success : function(data) {
            var Options = '';
            $.each($(data.message), function() {                        
                Options +='<li'+this.name+':'+this.value+'</li>';  
            });

            $("#list1").append(Options);
        }
    }); 

2 个答案:

答案 0 :(得分:1)

我不确定你的问题究竟是什么。但我发现格式化有问题。您的“li”代码未正确打开。

Options +='<li'+this.name+':'+this.value+'</li>';

将其更改为,

Options +='<li>'+this.name+':'+this.value+'</li>';

希望它会有所帮助。

答案 1 :(得分:1)

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    console.log(aData[1]);
    if (aData[1] == "Imported")
    {
        // $('td').css('background-color', '#FBE9E7');
        $(nRow).find('td:eq(1)').html('<span class="label label-success">'+aData[1]+'</span>');
    } else if (aData[1] == "Inactive") {
        $(nRow).find('td:eq(1)').html('<span class="label label-danger">'+aData[1]+'</span>');
    } else if(aData[1] == "Exported") {
        $(nRow).find('td:eq(1)').html('<span class="label label-primary">'+aData[1]+'</span>');
    }else{
        $(nRow).find('td:eq(1)').html('<span class="label label-default">'+aData[1]+'</span>');
        // $.addClass('label label-default');
    }

},

enter image description here