在ajax成功的表中显示数据[重复]

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

你可以通过$.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);          
            }        
        });
    });
});

您会在#listKill 的id 中获得结果html trHTML：

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获取任何响应数据

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

表体是这样附加的：

Assin id 到你的桌子

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

添加此行以添加新行

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