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

【问题标题】：How to populate HTML table with JSON data via jQuery AJAX call如何通过 jQuery AJAX 调用使用 JSON 数据填充 HTML 表
【发布时间】：2026-01-27 07:45:01
【问题描述】：

我需要通过 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);
        }
    });

【问题讨论】：

标签： jquery html ajax json

【解决方案1】：

我不确定到底是你的问题。但是我发现格式有问题。您的“li”标签未正确打开。

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

改成，

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

希望它会有所帮助。

【讨论】：

【解决方案2】：

"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');
    }

},

【讨论】：