如何在 Flask 中使用 AJAX 遍历列表

Question

问题

我正在尝试在 Flask 中使用 AJAX 显示图像文件。更具体地说，我想在单击按钮后显示图像，并在再次单击按钮后显示下一张图像（如幻灯片）。图像的文件名存储在我的数据库中。我查询数据库以获取当前用户的文件名列表，并将每个文件名与路径的其余部分（图像存储在磁盘上的路径）组合以显示图像。

到目前为止，我设法获得了当前用户的第一张图片。但是，我想不出一种方法来跟踪下一个要显示的图像。

我尝试使用全局变量作为计数器 ( file_counter)，它应该用作索引。每次发出ajax请求以获取下一个文件时，我想将file_counter增加1，但计数器不会在后续调用时增加，也不会引发错误。

问题

我需要如何初始化全局变量 (file_counter) 以使其在多个调用中存储其值？此外，使用全局变量是这样做的正确方法吗？

HTML

<div id="ajax-field"></div>

<button class="btn btn-block"  id="next-button"><p>Next Image!</p></button>

阿贾克斯：

$('#next-button').click(function(){

         $("#ajax-field").text("");

         $.ajax({

                        url: "/get_data",

                        type: "POST",

                        success: function(resp){

                            $('#ajax-field').append(resp.data);

                        }

                    });

                        });

路由：

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>