Question

我正在从ajax提交表单，在ajax成功之后，我想在表tr td中显示所有数据。

以下是我的响应，我获得了ajax成功，并且希望在ajax成功时将其加载到表中，但其显示空白表。

{"raildata":null,"killdata":[{"id":146,"acct_id":1885,"AcctNo":"UP2357"},{"id":145,"acct_id":1885,"AcctNo":"UP2357"}]}

下面是我尝试过的我的jquery ajax代码，但是成功提交表单后它不会显示数据。

$(document).ready(function(){
    $('#killfrm').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'addKillsheet']) ?>',
            data: $('form').serialize(),
            beforeSend: function(){
                $('#ibox1').children('.ibox-content').toggleClass('sk-loading');
            },
            success: function(response) {
                    var trHTML = ''; 
                    $(response).each(function (i,value) {

                        trHTML += response.killdata.map(function(killdata) {
                          return '<tr class="gradeA"><td>' + killdata.id + '</td><td>' + killdata.AcctNo + '</td></tr>';
                        });

                        trRailHTML += response.raildata.map(function(raildata) {
                          return '<tr class="gradeA"><td>' + raildata.rail_no + '</td><td>' + raildata.scale_no + '</td><td><button title="View" class="btn btn-default btn btn-xs tblbtn">View</button></td></tr>';
                        }); 

                    });
                $('#txtcount').val(sum);    
                $('#listRail').html(trRailHTML);                                 
                $('#listKill').html(trHTML);

        },
            error: function(response) {         
                console.log(response);          
            }        
        });
    });
});

下面是我的HTML表格

 <table class="table table-bordered">
                                        <thead>
                                           <tr>
                                            <th>Sheet#</th>
                                            <th>Acc #</th>
                                             <th>Action</th>
                                          </tr>
                                        </thead>                                         
                                        <tbody id="listKill"> </tbody>
                                  </table>

Answer 1

表主体是这样添加的：

将表的刺客ID

<table class="table table-bordered" id='my_table'>

添加此行以添加新行

$("#my_table tbody").append(trHTML);

Answer 2

要在ajax响应中获取json数据，您需要传递ajax选项：

dataType:"json"

继续以下示例：

$.ajax({
        type: 'post',
        url: 'Your Url',
        data: $('form').serialize(),
        dataType:'json',
        success: function(response) {
          response == here you get object you can get any value by object key

        }
       });

您的json响应：

{"raildata":null,"killdata":[{"id":146,"acct_id":1885,"AcctNo":"UP2357"},{"id":145,"acct_id":1885,"AcctNo":"UP2357"}]}

您可以通过使用如下所示的response变量来获得结果

console.log(response.killdata);
console.log(response.raildata);

如果需要帮助，请尝试以上

Answer 3

您可以通过$.each：脚本：

$(document).ready(function(){
    $('#killfrm').on('submit', function (e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '<?= Router::url(['controller' => 'Killsheets', 'action' => 'addKillsheet']) ?>',
            data: $('form').serialize(),
            beforeSend: function(){
                $('#ibox1').children('.ibox-content').toggleClass('sk-loading');
            },
            success: function(response) {
                    let trHTML = ''; 
                    let killData = response.killdata;
                    let raildata = response.raildata;

                    $.each(killData, function(kill) {
                        let killid = kill.id;
                        let killacct_id = kill.acct_id;
                        let killAcctNo = kill.AcctNo;
                        trHTML += '<tr>';
                        trHTML += '<td>'+killid+'</td>';
                        trHTML += '<td>'+killacct_id+'</td>';
                        trHTML += '<td>'+killAcctNo+'</td>';
                        trHTML += '</tr>';
                    });


                $('#listRail').html(raildata);                                 
                $('#listKill').html(trHTML);

            },
            error: function(response) {         
                console.log(response);          
            }        
        });
    });
});

您获得ID为trHTML的结果HTML #listKill：

html：

<table class="table table-bordered">
<thead>
<tr>
<th>Sheet#</th>
<th>Acc #</th>
<th>Action</th>
</tr>
</thead>                                         
<tbody id="listKill">result goes here </tbody>
</table>

您可以从response.objectkey = get value

获取任何响应数据

在ajax成功时在表中显示数据

3 个答案: