1
我有一个页面，最初由瓶子提供。下拉列表使用for循环填充列表。当用户点击下拉菜单中的其中一个项目时，一个ajax贴子将被制作到Flask。 Flask然后返回json和jquery，然后插入一些html。Flask Ajax Post - 如何停止重新呈现模板
所有这些工作正常。
问题：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')
'报价' 是一个独立的模块，它返回一个数据帧大熊猫。这被转换成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>