如何无需渲染模板从Flask获取变量并存入JavaScript？

一、调整后端接口，返回JSON数据 #

原来的fetchtest路由会渲染模板，现在改成返回JSON格式的appsData，让前端能异步接收数据而不刷新页面：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 替换成你实际的appsData提取逻辑
def extract_apps_data(target_url):
    # 这里写你原来从URL提取数据的代码，示例返回模拟数据
    return ["format_a", "format_b", "format_c"]

# 初始页面路由，仅渲染模板
@app.route('/')
def index():
    return render_template('index.html')

# 修改后的fetchtest接口，返回JSON响应
@app.route('/fetchtest', methods=['POST'])
def fetchtest():
    url = request.form.get('url')
    if not url:
        return jsonify({"error": "请提供URL参数"}), 400
    
    apps_data = extract_apps_data(url)
    return jsonify({"appsData": apps_data})

二、前端实现无刷新提交并填充formats数组 #

通过原生JavaScript阻止表单默认提交行为，用fetch发起异步请求，接收后端返回的JSON数据后存入formats数组：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无刷新数据获取</title>
</head>
<body>
    <form id="url-submit-form">
        <input type="text" name="url" placeholder="输入目标URL" required>
        <button type="submit">获取数据</button>
    </form>

    <script>
        // 初始化全局formats数组
        let formats = [];

        const submitForm = document.getElementById('url-submit-form');
        submitForm.addEventListener('submit', async function(e) {
            // 阻止表单默认提交（避免页面刷新）
            e.preventDefault();
            
            // 构造表单数据
            const formData = new FormData(this);
            
            try {
                // 异步发起POST请求
                const response = await fetch('/fetchtest', {
                    method: 'POST',
                    body: formData
                });

                if (!response.ok) {
                    throw new Error(`请求失败：${response.status}`);
                }

                // 解析JSON响应
                const data = await response.json();
                // 将后端返回的appsData存入formats数组
                formats = data.appsData;
                
                // 测试输出，可根据需求替换成页面渲染逻辑
                console.log('formats数组已更新:', formats);
            } catch (err) {
                console.error('处理出错:', err);
            }
        });
    </script>
</body>
</html>

关键说明 #

1. 无刷新提交：通过e.preventDefault()阻止表单默认的同步提交行为，改用异步fetch请求，完全避免页面刷新。
2. 数据传递：后端用jsonify将appsData序列化为JSON返回，前端解析后直接赋值给formats数组，实现Flask变量到JS数组的传递。
3. 初始数据填充（可选）：如果需要页面加载时就有初始appsData，可以在/路由中传入初始值，前端用模板语法初始化数组：

   # 后端修改index路由
   @app.route('/')
   def index():
       initial_data = ["default_format_1", "default_format_2"]
       return render_template('index.html', initial_data=initial_data)
   

   // 前端初始化formats
   let formats = {{ initial_data | tojson }};
   

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