使用 AJAX 的 HTML 表更新未呈现

Question

我是所有这些 AJAX 东西的新手，但是我正在尝试了解如何使用 AJAX 更新 html 表。

我正在使用烧瓶，它最初填充 HTML 表，然后我提交一个表单来运行查询，并将新数据返回给我。有了这些新数据，我希望 AJAX 更新表格。在我的 Ajax 调用中，已经有一个正常工作的 HighCharts 图表我主要关注表格部分。

如果您在 AJAX 中看到我有一个变量 flatOrderedDictList 这个变量是我关注的重点，我将如何在 AJAX 中使用更新的数据呈现表格？我对此有点困惑？

我希望 ajax 更新的带有表格的 html 页面

<div style="padding-left: 20px; padding-right: 20px; padding-bottom: 50px;">

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">User</th>
      <th scope="col">Customer</th>
      <th scope="col">Profile</th>
      <th scope="col">Role</th>
      <th scope="col">Image</th>
      <th scope="col">Packet Size</th>
      <th scope="col">Ingress Port Use</th>
      <th scope="col">Egress Port Use</th>
      <th scope="col">Date</th>
    </tr>
  </thead>
  <tbody>


   {% for item in flatOrderedDictList %}

    <tr>
        {% for key, value in flatOrderedDictList[loop.index0].items() %}
            <td>{{value}}</td>
        {%endfor%}
    </tr>

    {%endfor%}

    {% endif %}

  </tbody>
</table>

</div>

我的 ajax 代码

$(document).ready(function() {


    $('form').on('submit', function(event) {


        $.ajax({
            data : {
               images: $('#images').val(),
               userID: $('#userID').val(),
               release: $('#release').val(),
               rsp_type: $('#rsp_type').val(),
               lc_type: $('#lc_type').val(),
               featuer_type: $('#featuer_type').val(),
               chassis_type: $('#chassis_type').val(),
               profile_name: $('#profile_name').val(),
               os_type: $('#os_type').val(),
               daterange: $('#daterange').val(),
               role: $('#role').val(),
               customer: $('#customer').val(),
               queryCount: $('#queryCount').val(),
               flatOrderedDictList: $('#flatOrderedDictList').val()

            },
            type : 'POST',
            url : '/performance_reports_query_result'
        })
        .done(function(data) {


            if (data.error) {
                $('#errorAlert').text(data.error).show();
                $('#successAlert').hide();
            }
            else {
                console.log('customer is ' + customer + 'flatOrderedDictList is ' + data.flatOrderedDictList + data.flatOrderedDictList.length);
                $('#successAlert').text('Successfully Found ' + data.queryCount + ' Results').show();
                $('#errorAlert').hide();

            }

            $(function () {
                Highcharts.setOptions({
                    lang: {
                        thousandsSep: ','
                    }
                });

            $('#container').highcharts({
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Performance Results Run'
                },
                legend: {
                    title: {
                        text: 'Applied Featuers <br/><span style="font-size: 9px; color: #666; font-weight: normal">(Click to hide)</span><br>--------<br>',
                        style: {
                            fontStyle: 'italic'
                        }
                    },
                },

                xAxis: [{
                        categories: data.image_list_query,
                        tickColor: 'black',
                        lineColor: 'black',
                        lineWidth: 1,
                        labels: {
                            style:{
                                color: 'black',
                            },
                        }
                    },

                    {

                    linkedTo: 0,
                    opposite: true,
                    categories: data.oid_list,
                    labels: {
                        style:{
                        color: 'red',
                        display: 'none' 
                            },
                        }
                    },

                    {

                    linkedTo: 0,
                    lineColor: 'white',
                    tickColor: 'black',
                    categories: data.customer_name_listAjax,
                    labels: {
                        style:{
                        color: 'black',
                        // display: 'none' 
                            },
                        }
                    }

                ],


                yAxis: {
                    min: 0,
                    title: {
                        text: 'Packets Per Second'
                    }
                },
                credits: {
                  enabled: false,
                  text: 'mastarke'
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                 plotOptions: {
                    series: {
                        cursor: 'pointer',
                        point: {
                            events: {
                                click: function() {
                                    var tableDate = this.category;
                                    var clickedOid = this.series.chart.options.xAxis[1].categories[this.index];
                                    var image = this.category;
                                    window.location.href = '/performance_reports_detail' + clickedOid;

                                }
                            }
                        }
                    }
                },


                series: [{

                    name: 'FRAME SIZE',
                    data: data.framesize_list
                },
                { 

                    name: 'Baseline PPS',
                    data: data.baseline_traffic_value_list
                },
                {
                    name: 'Performance With Features',
                    data: data.PerformanceWithFeatures_list
                },

                ]
            });

            });

        }); 

        event.preventDefault();

    });

}); 

这是从 JS 控制台返回的内容。 JS Console Pic 1

Answer 1

我不明白你是想带入还是插入数据，但我留下了一种用 js vanilla 渲染 html 的方法。

请记住，如果您想动态执行此操作，则有所不同，这种方式仅在您调用一次 api 时才有效。

渲染

async function insertData() {
    const route = 'your api route';
    const response = await fetch(`${route}`);
    const json = await response.json();
    const thead = document.querySelector('#myThead');

    for (const i in json) {
        /* I don't know the response of your api then this code is if you response it's only a object with de values
            example 
            json = {
                User,
                Customer,
                etc,
                etc,
            }
        */

        if (json.hasOwnProperty(i)) {
            const element = json[i];
            thead.innerHTML += 
            `
                <th scope="col">${element}</th>
            `;
        }
    }
}

输出 HTML

  <thead id="myThead">
<tr>
  <th scope="col">User</th>
  <th scope="col">Customer</th>
  <th scope="col">Profile</th>
  <th scope="col">Role</th>
  <th scope="col">Image</th>
  <th scope="col">Packet Size</th>
  <th scope="col">Ingress Port Use</th>
  <th scope="col">Egress Port Use</th>
  <th scope="col">Date</th>
</tr>
</thead>