渲染烧瓶模板显示HTM页面两次

Question

我有一个烧瓶路由，用于呈现包含数据帧表的模板(method1_result.html(。单击表格行将单元格值发送到另一个烧瓶路由以呈现新模板(method2_result.html(。最后一个操作显示与单击的单元格相关的新结果，但新的html页面(method1_result.html(显示两次结果。

main.py
@app.route("/method1",methods=['POST', 'GET'])
def method1():

'
'
return render_template('method1_result.html')
@app.route("/method2",methods=['POST', 'GET'])
def method2():
if request.method == 'POST': 
# get info here to render page!
.
.
return render_template('method2_result.html',var1=var1)     

method1.html

{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<br/>
<h3 align="center" style="color:blue" style="font-family:verdana">Method1 Result</h3> 
<br/>
<div class="container-fluid">
<table id="table" class="table table-striped table-bordered" style="width: 100%">
<thread>
<tr>
{% for header in table[0].keys() %}
<th>{{header}}</th>
{% endfor %}
</tr>
</thread>
<tbody>
{% for row in table %}

<tr class='clickable-row'>
<td>{{row['Field1']}}</td>
<td>{{row['Field2']}}</td>
<td>{{row['Field3']}}</td>
<td>{{row['Field4']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<script>
highlight_row();
function highlight_row(var1='') {
var table = document.getElementById('table');
var cells = table.getElementsByTagName('td');
for (var i = 0; i < cells.length; i++) {
// Take each cell
var cell = cells[i];
// do something on onclick event for cell
cell.onclick = function () {
// Get the row id where the cell exists
var rowId = this.parentNode.rowIndex;
var rowsNotSelected = table.getElementsByTagName('tr');
for (var row = 0; row < rowsNotSelected.length; row++) {
rowsNotSelected[row].style.backgroundColor = "";
rowsNotSelected[row].classList.remove('selected');
}
var rowSelected = table.getElementsByTagName('tr')[rowId];
rowSelected.style.backgroundColor = "yellow";
rowSelected.className += " selected";
msg = 'The Failure Message : ' +   rowSelected.cells[6].innerHTML;
var var1 = rowSelected.cells[3].innerHTML;

$.ajax({
url:"/method2",
method:"POST",
data:{var1:var1},
success:function(data)
{ 
$('tbody').html(data);
$('tbody').append(data.htmlresponse);
},
})

}
}
}
</script>
{% endblock %}

method2.html

{% block content %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<br/>
<h4 align="center" style="color:blue" style="font-family:verdana">Method2 result</h4><br/>
<br/>
<table id="table" class="table table-striped table-bordered table-hover" style="width: 100%">
<thread>
<tr>
{% for header in table1[0].keys() %}
<th>{{header}}</th>
{% endfor %}
</tr>
</thread>
<tbody>
{% for row in table1 %}
<tr>
<td>{{row['Start']}}</td>
<td>{{row['OperationID']}}</td>
<td style="color:red">{{row['Failure Message1']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endblock %}

不确定我做错了什么？

Answer 1

1. 在您的代码中，您正在执行异步调用(ajax(。异步调用不会重新加载页面。这意味着当结果(即method2_result.html(出现时，用户仍在method1_result.html上

2. 您的代码还要求简单地将整个method2_result.html附加到method1_result.html页面。事实上，你做两次是因为你有

// First you append the entire response i.e. the entire method2 result
$('tbody').html(data);
// Then you try to do it a second time but just the 'htmlresponse' (not sure where you are getting this fro
$('tbody').append(data.htmlresponse);

3. 如果要用method2_result的全部内容替换整个页面(method1_result(，则不需要Ajax调用。将ajax调用替换为创建表单的代码，使用要传递给服务器的数据值创建一个输入元素，然后提交表单。由于这不是ajax调用，它将加载一个新页面method2.html

var form = document.createElement("form");
form.method = "POST";
form.action = "/method2";   
var elem = document.createElement("input"); 
elem.name= var1;
elem.value= var1;

form.appendChild(elem1);  
document.body.appendChild(form);
form.submit();

4. 如果你不想替换整个页面(也许你想用新页面替换现有页面的正文(，那么你不能只执行append，这意味着添加到现有内容中，除非你首先清除了现有内容。您有2个选项

选项1

$('tbody').empty() // Remove the current contents
$('tbody').append(data); // Add the new contents

选项2

$('tbody').html(data)