我在使用AJAX调用获取JSON数据后尝试在表中添加行，但它不显示任何行：
function populateTable() {
var request = $.ajax({
url: "http://app.evolution-betting.net/public/ajaxevents",
type: "GET",
dataType: "json"
});
request.done(function (data) {
$.each(data, function (index, element) {
var ns = '';
var tip = '';
var status = '';
if (element.ev_f == '1') {
if (element.ev_ns1 == '' && element.ev_ns2 != '' && element.ev_f == '1') {
ns = '<td id="ns1" class="hidden-phone" style="border:1px solid #CC0000;"></td>
<td id="ns2" class="hidden-phone">' + element.ev_ns2 + '</td>';
} else if (element.ev_ns1 != '' && element.ev_ns2 == '' && element.ev_f == '1') {
ns = '<td id="ns1" class="hidden-phone">' + element.ev_ns1 + '</td>
<td id="ns2" class="hidden-phone" style="border:1px solid #CC0000;"></td>';
} else if (element.ev_ns1 == '' && element.ev_ns2 == '' && element.ev_f == '1') {
ns = '<td id="ns1" class="hidden-phone" style="border:1px solid #CC0000;border-right:0px"></td>
<td id="ns2" class="hidden-phone" style="border:1px solid #CC0000;"></td>';
} else {
ns = ' <td id="ns1" class="hidden-phone">' + element.ev_ns1 + '</td>
<td id="ns2" class="hidden-phone">' + element.ev_ns2 + '</td>';
}
} else {
ns = '<td id="ns1" class="hidden-phone"></td>
<td id="ns2" class="hidden-phone"></td>'
}
if (element.ev_f == '1' && (element.ev_ns1 != '' || element.ev_ns2 != '')) {
if (element.ev_tip == '1' && (element.ev_ns1 > element.ev_ns2)) {
tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
} else if (element.ev_tip == '1X' && (element.ev_ns1 >= element.ev_ns2)) {
tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
} else if (element.ev_tip == '2' && (element.ev_ns1 < element.ev_ns2)) {
tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
} else if (element.ev_tip == '2X' && (element.ev_ns1 <= element.ev_ns2)) {
tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>'
} else if (element.ev_tip == '12' && ((element.ev_ns1 > element.ev_ns2) || (element.ev_ns1 < element.ev_ns2))) {
tip = ' <td class="hidden-phone"><span class="label label-success">Win</span></td>';
} else if (element.ev_tip == 'X' && (element.ev_ns1 == element.ev_ns2)) {
tip = '<td class="hidden-phone"><span class="label label-success">Win</span></td>';
} else {
tip = '<td class="hidden-phone"><span class="label label-warning">Lose</span></td>';
}
} else {
tip = '<td class="hidden-phone"><span class="label label-info">Pending</span></td>'
}
if (element.ev_f == '0' && element.ev_s == '1') {
status = '<td class="hidden-phone"><span class="label label-info">In progress</span></td>';
} else if (element.ev_s == '0' && element.ev_f == '0') {
status = '<td class="hidden-phone"><span class="label label-warining">Not started</span></td>';
} else {
status = '<td class="hidden-phone"><span class="label label-success">Finished</span></td>';
}
var _row = '<tr id="' + element.ev_id + '" class="odd gradeX">
<td>
<div id="desc" style="display:none">' + element.ev_desc + '</div>
<div id="etime" style="display:none">' + element.ev_etime + '</div>
<div id="edate" style="display:none">' + element.ev_edate + '</div>
</td>
<td id="op1">' + element.ev_op1 + '</td>
<td id="op2" class="hidden-phone">' + element.ev_op2 + '</td>
<td id="host" class="hidden-phone">' + element.ev_host + '</td>
<td id="stime" class="hidden-phone center">' + element.ev_stime + '</td>
<td id="date" class="hidden-phone center">' + element.ev_date + '</td>
<td id="tip" class="hidden-phone center">' + element.ev_tip + '</td>
<td id="coef1" class="hidden-phone">' + element.ev_coef1 + '</td>
<td id="coef2" class="hidden-phone">' + element.ev_coef2 + '</td>' + ns + '
<td id="cat" class="hidden-phone">' + element.ev_cat + '</td>'
+ tip + '
' + status + '
<td class="center">
<a id="del" data-id="' + element.ev_id + '"href="#" >Delete</a>
<a id="edit" data-id="' + element.ev_id + '" href="#widget-config" data-toggle="modal" >Edit</a>
</td>
</tr>
';
$("#sample_1").find('tbody')
.append(_row);
});
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
}
答案 0 :(得分：0)
以下是使用AJAX调用将数据加载到html表的工作示例。如果您要添加更多行数据，请按以下方式将其循环：
$.ajax({
type: "GET",
url: "/controllerURL.html", //controller URL
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (results) {
console.log(results)
var success = results.success;
if(success){
var finaldata = "<tbody><thead><tr><th>ID</th><th>header1</th><th>header2</th><th>header3</th></tr></thead>"; //data
var data = results.message;
data = jQuery.parseJSON(data);
alert(data);
for(var i = 0; i < data.length; i++){
var value = data[i];
finaldata = finaldata+ "<tr><th>"+value.ID+"</th><th>"+value.variable1+"</th><th>"+value.variable2+"</th></tr>";
}
finaldata = finaldata + "</tbody>";
$("#tableID").html(finaldata);
}
},
error: function (data) {
alert("fail");
console.log('ajax call error');
}