Question

我是所有这些AJAX东西的新手，但是我试图查看如何使用AJAX更新html表。

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

如果您在AJAX中看到一个变量flatOrderedDictList，则该变量是我关注的焦点，我该如何在AJAX中使用此更新的数据来呈现表？我对此感到困惑吗？

我的HTML页面以及我想更新ajax的表

<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>

使用AJAX无法更新HTML表格

1 个答案: