Flask and HTML - 从 Flask 返回 sqlite3 查询结果到 HTML 并用 Jinja2 渲染

Question

我正在尝试实现网页的连续加载。我已经设法让 JavaScript 工作，这样当用户在我的网页底部时，它会调用 Python Flask 函数来获取下一对数据。但是，我需要您帮助的地方是将 sqlite3 查询的结果返回到 HTML 的部分，以便我可以使用 Jinja2 的 {% for post in loadPosts %) 命令对其进行迭代。

这是我目前拥有的： Python3：

@app.route("/load", methods=["GET", "POST"])
def load():
    conn = sqlite3.connect('imageboard.db')
    c = conn.cursor()
    #Defines what to do when the request is GET
    if request.method == 'GET':
        print('1')
        session['numberOfPosts'] = int(session.get('numberOfPosts')) + 2
        print('2')
        numberOfPostsVariable = str(session.get('numberOfPosts'))
        print('3')
        #loadedPosts = c.execute('SELECT * FROM posts ORDER BY date, time DESC LIMIT 2 {number}'.format(number=numberOfPostsVariable))
        loadedPosts = c.execute('SELECT * FROM posts ORDER BY date, time DESC LIMIT 2 OFFSET ' + str(numberOfPostsVariable))
        for row in loadedPosts:
            print(row)
        print('4')
        return jsonify(list(loadedPosts))
    
    #Defines what to do when the request is POST
    if request.method == 'POST':
        print('1')
        session['numberOfPosts'] = int(session.get('numberOfPosts')) + 2
        print('2')
        numberOfPostsVariable = str(session.get('numberOfPosts'))
        print('3')
        #loadedPosts = c.execute('SELECT * FROM posts ORDER BY date, time DESC LIMIT 2 {number}'.format(number=numberOfPostsVariable))
        loadedPosts = c.execute('SELECT * FROM posts ORDER BY date, time DESC LIMIT 2 OFFSET ' + str(numberOfPostsVariable))
        for row in loadedPosts:
            print(row)
        print('4')
        return jsonify(list(loadedPosts))

HTML / JavaScript / Jinja2：

<script>
    window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        //Define what to do when user is on the bottom of my webpage
            $.ajax({
            url: '/load',
            data: $('form').serializeArray(),
            type: 'POST',
            success: function(response) {
                $('#response').text(JSON.stringify(response));
                response =  JSON.stringify(response);
                
                var loadNewPostsVariable;
                
                loadNewPostsVariable = '{% for row in response %}<div class="container-fluid" align="center"><span class="badge badge-info">#row[0] / Pridané dňa row[2] o row[1]<br>používateľom row[3]</span><h6>row[4]</h6><p>row[5]</p><img src="{{ url_for("static", filename="images/"+row[6]) }} alt="myText" height="20%" class="img-fluid"></div><p>&nbsp;</p> {% endfor %}'
            
                //Add this <div> element into the body of the webpage
                document.body.innerHTML += loadNewPostsVariable
                console.log(response)
            }
        });
    };
};
</script>

我认为问题可能在我的 HTML / JavaScript 代码的这些行之间：

success: function(response) {
                $('#response').text(JSON.stringify(response));
                response =  JSON.stringify(response);

我的 sqlite3 查询返回的数据如下所示（这些是我需要能够使用 Jinja2 迭代并不断显示它们（无需刷新网页）的数据）：

(15697753, '14:16:45', '21.7.2020', 'wqw', 'asfsaf', 'fz', '15697753_02.jpg')
(3102620, '14:16:33', '21.7.2020', 'neisor', 'banan', 'asfafs', '3102620_IMG_5952.jpg')

非常感谢任何帮助。

谢谢

Answer 1

这可能需要更多注意，但首先，我认为您应该尝试（添加换行符以提高可读性）：

var loadNewPostsVariable = ` (<--that's a backtick)

{% for row in response %}
    {% set image_name = "images/"+{{ row[6] }} %}

    <div class="container-fluid" align="center">
        <span class="badge badge-info">#{{ row[0] }} / Pridané dňa {{ row[2]}} o {{ row[1] }} 
            <br>
            používateľom {{ row[3] }}
        </span>
        <h6>{{ row[4] }}</h6>
        <p>
            {{ row[5] }}
        </p>
        <img src="{{ url_for("static", filename=image_name }} alt="myText" height="20%" class="img-fluid">
    </div>
    <p>&nbsp;</p> 
{% endfor %}`