Flask+JS图片库开发：点击缩略图无法渲染模板问题

使用Flask作为后端、JavaScript作为前端开发图片库时，遇到以下问题：点击缩略图通过XMLHttpRequest传递图片文件名给Flask后端，Flask能正确打印接收到的文件名，但无法返回并渲染image_view.html模板。

现有代码 #

JavaScript代码 #

let imageContainers = document.querySelectorAll('#imageContainer')
imageContainers.forEach(function(item, index) {
    item.addEventListener('click', function(){
        let request = new XMLHttpRequest();
        let imgToFlask = imgList[index];
        request.open('POST', `/image_view/${JSON.stringify(imgToFlask)}`);
        request.send();
    })
})

Flask代码 #

@app.route('/image_view/<imgToFlask>', methods=['POST'])
def image_view(imgToFlask):
    image = imgToFlask
    print(image) # 执行到此处后似乎停止
    return render_template('image_view.html', image=image)

终端输出 #

127.0.0.1 - - [08/Jul/2023 10:40:59] "POST /image_view/%22489916z_489916S.jpg%22 HTTP/1.1" 200 -
"489916z_489916S.jpg"

问题根源 #

1. XMLHttpRequest的特性限制：XHR是异步请求，仅负责发送请求和接收响应内容，不会自动触发页面跳转或渲染新模板——当前代码只发送了请求，未处理后端返回的HTML内容，所以前端页面无变化。
2. 冗余的URL参数转义：用JSON.stringify处理文件名会给字符串添加双引号，导致URL出现%22（双引号的URL编码），虽不影响Flask解析，但属于不必要的冗余。

解决方案 #

方案一：修改前端JS，处理XHR响应更新页面 #

如果希望在当前页面加载模板内容，可修改JS添加响应处理逻辑：

let imageContainers = document.querySelectorAll('#imageContainer')
imageContainers.forEach(function(item, index) {
    item.addEventListener('click', function(){
        let request = new XMLHttpRequest();
        let imgToFlask = imgList[index];
        // 去掉JSON.stringify，用encodeURIComponent处理文件名避免URL编码问题
        request.open('POST', `/image_view/${encodeURIComponent(imgToFlask)}`);
        
        // 新增响应处理函数
        request.onload = function() {
            if (request.status === 200) {
                // 用返回的HTML替换当前页面内容，或指定DOM元素更新
                document.body.innerHTML = request.responseText;
            }
        };
        
        request.send();
    })
})

方案二：用页面跳转替代XHR（更简洁） #

若需求是点击后跳转到新页面显示模板，无需使用XHR，直接触发页面跳转：

let imageContainers = document.querySelectorAll('#imageContainer')
imageContainers.forEach(function(item, index) {
    item.addEventListener('click', function(){
        let imgToFlask = imgList[index];
        // 用GET请求跳转页面
        window.location.href = `/image_view/${encodeURIComponent(imgToFlask)}`;
    })
})

同时修改Flask路由为GET方法（页面跳转默认用GET）：

import urllib.parse
from flask import render_template

@app.route('/image_view/<imgToFlask>', methods=['GET'])
def image_view(imgToFlask):
    # 解码URL中的文件名
    image = urllib.parse.unquote(imgToFlask)
    print(image)
    return render_template('image_view.html', image=image)

方案三：POST请求配合后端重定向 #

若必须使用POST请求，可让后端返回重定向响应触发页面跳转：

from flask import render_template, redirect, url_for
import urllib.parse

@app.route('/image_view/<imgToFlask>', methods=['POST'])
def image_view(imgToFlask):
    # 去掉JSON.stringify带来的双引号
    image = imgToFlask.strip('"')
    print(image)
    # 重定向到GET路由显示模板
    return redirect(url_for('image_view_display', image=urllib.parse.quote(image)))

# 新增GET路由用于渲染模板
@app.route('/image_view_display/<image>', methods=['GET'])
def image_view_display(image):
    image = urllib.parse.unquote(image)
    return render_template('image_view.html', image=image)

内容的提问来源于stack exchange，提问作者tom_soier