我是所有这些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 1
我不知道你是否想带来或插入数据,但我留下一个方法如何呈现与js香草html。你知道吗
记住,如果你想做这个动态的,它是不同的,这种方式只适用于当你调用你的api一次。你知道吗
渲染
输出HTML
相关问题 更多 >
编程相关推荐