Javascript 使用AJAX使用jQuery填充表

我试图在使用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>&nbsp;
                                                                                                        <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);
    });
}

函数populateTable（）{
var请求=$.ajax({
url:“http://app.evolution-betting.net/public/ajaxevents",
键入：“获取”，
数据类型：“json”
});
请求完成（功能（数据）{
$.each（数据、函数（索引、元素）{
var ns=''；
var-tip=''；
var状态=“”；
如果（element.ev_f=='1'）{
如果（element.ev_ns1=''&&element.ev_ns2！=''&&element.ev_f=='1'）{
ns=
“+element.ev_ns2+”；
}else if（element.ev_ns1！=''&&element.ev_ns2=''&&element.ev_f=='1'）{
ns=''+元素.ev\u ns1+'
';
}否则如果（element.ev_ns1=''&&element.ev_ns2=''&&element.ev_f=='1'）{
ns=
';
}否则{
ns=''+元素.ev\u ns1+'
“+element.ev_ns2+”；
}
}否则{
ns=
'
}
if（element.ev_f='1'&&（element.ev_ns1！=''''.| element.ev_ns2！=''）{
if（element.ev_tip='1'&&（element.ev_ns1>element.ev_ns2））{
小费=‘赢’；
}否则如果（element.ev_tip='1X'&&（element.ev_ns1>=element.ev_ns2））{
小费=‘赢’；
}else if（element.ev_tip='2'&&（element.ev_ns1

以下是使用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');    

 }

$.ajax({
键入：“获取”，
url:“/controllerURL.html”//控制器url
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（结果）{
console.log（结果）
var success=results.success；
如果（成功）{
var finaldata=“IDheader1header2header3”；//数据
var data=results.message；
data=jQuery.parseJSON（数据）；
警报（数据）；
对于（变量i=0；i

您对代码的格式设置使您的代码看起来像是在行尾之前没有终止符的字符串常量。例如'var\u row='`我建议使用javascript模板（如mustache.js）来避免这种类型的代码，这将使您的生活更加轻松

actual