【发布时间】：2017-04-12 18:22:08
【问题描述】：
我有一个最初由烧瓶提供的页面。下拉列表由使用 for 循环的列表填充。当用户单击下拉列表中的一项时，会向 Flask 发送一个 ajax 帖子。 Flask 然后返回 json 和 jquery 然后插入一些 html。
这一切都很好。
问题：在更新 DOM 后，出于某种原因，向 Flask 发出 GET 请求，然后从头开始重新渲染模板。我不知道如果触发那个 GET 会怎样......
问题：如何阻止这种情况？
这是我的代码：
app.py
@app.route('/orders', methods=['GET','POST'])
@login_required
def orders():
customers = get_active_cust()
if request.method == 'GET':
return render_template('orders.html', customers=customers)
elif request.method=='POST':
offers = get_sent_offers(int(request.values.get('party_id')))
return offers.to_json(orient='records', date_format='iso')
'offers' 是一个单独的模块，它返回一个 pandas 数据框。这是转换为json格式并发送给客户端。
html:
<div class="container" style="padding-top: 40px">
<div class="row">
<!--left-->
<div class="col-md-2" id="leftCol">
<ul class="nav nav-stacked" id="sidebar">
<li class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select a Customer <span class="caret"></span></button>
<ul ID="customer" class="dropdown-menu">
{% for index,row in customers.iterrows() %}
<li><a href="" id="customer_select" value={{ row.party_id }}>{{ row.party_name }}</a></li>
{% endfor %}
</ul>
</li>
</ul>
</div>
<!--/left-->
<!--right-->
<div class="col-md-9">
<div id="offer_column"></div> <!--title insert point-->
<div class="row">
<div class="col-md-9">
<div id="each_offer"></div> <!-- panel insert point -->
<hr class="">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<hr class="">
</div>
<!--/right-->
</div>
<!--/row-->
</div>
<!--/container-->
<div class="row"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#customer_select').click(function(){
var party_id = $(this).attr('value');
var past_offers;
$.post('/orders',{
party_id: party_id})
.done(function(response){
past_offers = JSON.parse(response);
$('<h3 id="sec0" class="">Sent Offers</h3>').insertBefore($('#offer_column'));
//get unique offer dates
var unique = {};
var distinct = [];
for( var i in past_offers ){
if( typeof(unique[past_offers[i].sent_date]) == "undefined"){
distinct.push(past_offers[i].sent_date);
}
unique[past_offers[i].sent_date] = 0;
};
//loop through dates and print out past offers into panels>tables
for (var d in distinct) {
var panel = '<div class="panel panel-default">' + '<div class="panel-heading">' +
'<h4 class="">' + new Date(distinct[d]) + '</h4>' +
'</div><div class="panel-body" div="">' +
'<table class="table table-bordered" style=""><tbody>' +
'<tr><th class="" contenteditable="false">Location</th>' +
'<th class="" contenteditable="false">Product</th>' +
'<th class="" contenteditable="false">Price</th>' +
'<th class="" contenteditable="false">Volume</th>' +
'</tr>';
//loop to add each product per distinct date
for (var i in past_offers) {
if (past_offers[i].sent_date == distinct[d]) {
panel = panel +
'<tr>' +
'<td class="" contenteditable="false">' + past_offers[i].station_name + '</td>' +
'<td class="" contenteditable="false">' + past_offers[i].product_name + '</td>' +
'<td class="" contenteditable="true">' + past_offers[i].target_offer_tax + '</td>' +
'<td class="" contenteditable="true">0</td>' +
'</tr>';
}
}
// add finishing touches
panel = panel +
'</tbody></table>' + '<div class="">' +
'<button class="btn btn-default">Submit</button>' +
'</div></div></div>';
$(panel).insertAfter($('#each_offer'));
}
});
});
});
</script>
【问题讨论】：