您可以为要展示的每件商品创建唯一的 ID。每个td 及其对应的按钮将在id 中有一个尾随数字,可用于在单击按钮时获取所需的文本。此外,在这种情况下使用jquery 和ajax 与后端通信更简单:
在您的 HTML 中:
flights.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<div class='available_flights'>
{%for row in data%}
<td id='listing{{row.id}}' class='{{row.flight}}'>{{row.name}}</td>
<button id = 'button{{row.id}}' class='select_td'>Select</button>
<div id='info{{row.id}}'></div>
{%endfor%}
</div>
<script>
$(document).ready(function(){
$('.available_flights').on('click', '.select_td', function(){
var _id = this.id.match('\\d+');
var flight_name = $('#listing'+_id).text();
var abbrev = $('#listing'+_id).attr('class');
$.ajax({
url: "/get_flight",
type: "get",
data: {flight: flight_name, id:_id, name:abbrev},
success: function(response) {
$("#info"+_id).html(response.result);
}
});
});
});
</script>
</html>
然后,在应用程序中:
import flask, typing
app = flask.Flask(__name__)
class Flight(typing.NamedTuple):
id:int
flight:str
name:str
@app.route('/', methods=['GET'])
def home():
d = [["A100", "oranges"], ["A101", "apples"]]
return flask.render_template('flights.html', data=[Flight(i, a, b) for i, [a, b] in enumerate(d)])
@app.route('/get_flight')
def get_flight():
d = [["A100", "oranges"], ["A101", "apples"]]
flight_id = int(flask.request.args.get('id'))
flight_name = flask.request.args.get('flight')
flight_abbreviation = flask.request.args.get('name')
selected = dict(d)[flight_abbreviation]
return flask.jsonify({"result":f'<p>Thank you for choosing {flight_name}</p>'})