不呈现AJAX的HTML表更新

2024-03-28 14:39:19 发布

您现在位置:Python中文网/ 问答频道 /正文

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

我正在使用flask,它最初填充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 1JS Console pic 2


Tags: textnamedatastyletypetableajaxfunction
1条回答
网友
1楼 · 发布于 2024-03-28 14:39:19

我不知道你是否想带来或插入数据,但我留下一个方法如何呈现与js香草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>

相关问题 更多 >