Python 如何在Flask中使用AJAX迭代列表
问题 我正在尝试在Flask中使用AJAX显示图像文件。更具体地说,我希望单击按钮后显示一个图像,再次单击按钮后显示下一个图像(如幻灯片放映)。图像的文件名存储在我的数据库中。我查询数据库以获取当前用户的文件名列表,并将每个文件名与路径的其余部分(图像存储在磁盘上的路径)结合起来以显示图像 到目前为止,我设法获得了当前用户的第一张图像。然而,我想不出一种方法来跟踪下一张图片是哪张 我尝试使用全局变量作为计数器(Python 如何在Flask中使用AJAX迭代列表,python,jquery,ajax,flask,Python,Jquery,Ajax,Flask,问题 我正在尝试在Flask中使用AJAX显示图像文件。更具体地说,我希望单击按钮后显示一个图像,再次单击按钮后显示下一个图像(如幻灯片放映)。图像的文件名存储在我的数据库中。我查询数据库以获取当前用户的文件名列表,并将每个文件名与路径的其余部分(图像存储在磁盘上的路径)结合起来以显示图像 到目前为止,我设法获得了当前用户的第一张图像。然而,我想不出一种方法来跟踪下一张图片是哪张 我尝试使用全局变量作为计数器(file\u counter),它应该用作索引。为了获得下一个文件,我想在每次发出aj
file\u counter
),它应该用作索引。为了获得下一个文件,我想在每次发出ajax请求时将file_计数器增加1,但在后续调用时计数器不会增加,也不会抛出错误
问题
我需要如何初始化全局变量(file_counter),以便它跨多个调用存储其值?此外,使用全局变量是正确的方法吗
HTML
路由:
global filenames
global file_count
@app.route("/get_data", methods=['POST'])
def get_data():
try: # Is intended to fail on the first run in order for the global variables to be initialized. However it keeps failing on subsequent runs
display_img = filenames[file_count]
file_count +=1
except:
filenames = []
# current_user.uploads returns all file-objects of the current user
user_uploads = current_user.uploads
for file in user_uploads:
# file.filename returns the respective filename of the image
filenames.append(file.filename)
#filenames is now a list of filenames i.e. ['a.jpg','b.jpg','c.jpg'...]
display_img = filenames[0]
file_count = 1
path = "image_uploads/4_files/"+display_img
return jsonify({'data': render_template('ajax_template.html', mylist = path)})
ajax_template.html:
<ul>
{% block content %}
<li>
<img id="selected-image-ajax" src="{{url_for('static',filename=mylist)}}" class="img-thumbnail" style="display:block; margin:auto;"></img>
</li>
{% endblock content %}
</ul>
{%block content%}
-
{%endblock内容%}
正如@roganjosh所指出的,会话是跨多个请求存储信息的最佳方式。此解决方案提供了使用flask.session
存储计数器的照片显示的实现:
import flask, random, string
app = flask.Flask(__name__)
app.secret_key = ''.join(random.choice(string.printable) for _ in range(20))
#to use flask.session, a secret key must be passed to the app instance
@app.route('/display_page', methods=['GET'])
def display_page():
'''function to return the HTML page to display the images'''
flask.session['count'] = 0
_files = [i.filename for i in current_user.uploads]
return flask.render_template('photo_display.html', photo = _files[0])
@app.route('/get_photo', methods=['GET'])
def get_photo():
_direction = flask.request.args.get('direction')
flask.session['count'] = flask.session['count'] + (1 if _direction == 'f' else - 1)
_files = [i.filename for i in current_user.uploads]
return flask.jsonify({'photo':_files[flask.session['count']], 'forward':str(flask.session['count']+1 < len(_files)), 'back':str(bool(flask.session['count']))})
display\u page.html
中的javascript与后端通信,并相应地更新img
标记src
。脚本根据当前计数值添加或删除导航按钮
演示:
为了测试上述解决方案,我创建了一个图像文件夹来存储随机照片以显示:
我不能自称为您提供了最佳实践,但这里不使用globals。如果有,请将其存储在会话
数据中
<ul>
{% block content %}
<li>
<img id="selected-image-ajax" src="{{url_for('static',filename=mylist)}}" class="img-thumbnail" style="display:block; margin:auto;"></img>
</li>
{% endblock content %}
</ul>
import flask, random, string
app = flask.Flask(__name__)
app.secret_key = ''.join(random.choice(string.printable) for _ in range(20))
#to use flask.session, a secret key must be passed to the app instance
@app.route('/display_page', methods=['GET'])
def display_page():
'''function to return the HTML page to display the images'''
flask.session['count'] = 0
_files = [i.filename for i in current_user.uploads]
return flask.render_template('photo_display.html', photo = _files[0])
@app.route('/get_photo', methods=['GET'])
def get_photo():
_direction = flask.request.args.get('direction')
flask.session['count'] = flask.session['count'] + (1 if _direction == 'f' else - 1)
_files = [i.filename for i in current_user.uploads]
return flask.jsonify({'photo':_files[flask.session['count']], 'forward':str(flask.session['count']+1 < len(_files)), 'back':str(bool(flask.session['count']))})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class='image_display'>
<img src="{{photo}}" id='photo_display' height="100" width="100">
<table>
<tr>
<td class='back'></td>
<td class='forward'><button id='go_forward' class='navigate'>Forward</button></td>
</tr>
</table>
</div>
</body>
<script>
$(document).ready(function(){
$('.image_display').on('click', '.navigate', function(){
var direction = 'b';
if ($(this).prop('id') === 'go_forward'){
direction = 'f';
}
$.ajax({
url: "/get_photo",
type: "get",
data: {direction: direction},
success: function(response) {
$('#photo_display').attr('src', response.photo);
if (response.back === "True"){
$('.back').html("<button id='go_back' class='navigate'>Back</button>")
}
else{
$('#go_back').remove();
}
if (response.forward === "True"){
$('.forward').html("<button id='go_forward' class='navigate'>Forward</button>")
}
else{
$('#go_forward').remove();
}
},
});
});
});
</script>
</html>