如何将Flask返回的JSON数据传递至JavaScript并展示在页面？

我来帮你搞定这个问题！核心思路是用JavaScript拦截表单的默认提交行为，通过AJAX请求获取Flask返回的JSON数据，然后把数据传递到目标页面并渲染出来。下面分步骤给你详细方案：

1. 修改Index页面的表单与添加JavaScript逻辑 #

首先给表单加个ID方便JS定位，然后编写代码阻止默认的页面跳转提交，改用异步请求获取数据，再处理页面跳转：

<!-- index.html 表单部分 -->
<form id="searchForm" action="{{ url_for('returnOne') }}" method="GET">
  <p>Nome: <input type="text" name="nome" required /></p>
  <input type="submit" value="Pesquisar">
</form>

<script>
// 获取表单元素
const searchForm = document.getElementById('searchForm');

// 拦截表单默认提交行为
searchForm.addEventListener('submit', async (e) => {
  e.preventDefault(); // 阻止页面刷新跳转
  
  // 获取输入框的值并做简单校验
  const nomeInput = document.querySelector('input[name="nome"]');
  const nome = nomeInput.value.trim();
  
  if (!nome) {
    alert('Por favor, preencha o nome!');
    return;
  }
  
  try {
    // 发送GET请求到Flask路由，自动编码参数避免乱码
    const response = await fetch(`${searchForm.action}?nome=${encodeURIComponent(nome)}`);
    
    if (!response.ok) {
      throw new Error('Erro na requisição ao servidor');
    }
    
    // 解析返回的JSON数据
    const userData = await response.json();
    
    // 将数据临时存储到sessionStorage（页面关闭后自动清除）
    sessionStorage.setItem('userData', JSON.stringify(userData));
    
    // 跳转到结果展示页面（比如命名为result.html）
    window.location.href = 'result.html';
  } catch (err) {
    console.error('Detalhes do erro:', err);
    alert('Ocorreu um erro ao buscar dados! Tente novamente.');
  }
});
</script>

2. 确保Flask路由正确返回JSON #

你的Flask函数要使用jsonify返回标准的JSON响应，这样前端才能正确解析。示例代码如下：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/returnOne')
def returnOne():
    nome = request.args.get('nome')
    # 这里替换成你的数据库查询逻辑，比如从数据库获取用户信息
    # 假设查询后得到的结果是一个字典
    user_result = {
        "nome": nome,
        "idade": 28,
        "email": f"{nome.lower()}@exemplo.com",
        "cidade": "São Paulo"
    }
    # 用jsonify返回JSON格式的响应
    return jsonify(user_result)

if __name__ == '__main__':
    app.run(debug=True)

3. 创建结果展示页面（result.html） #

在这个页面中读取之前存储的JSON数据，然后动态渲染到页面上：

<!DOCTYPE html>
<html>
<head>
    <title>Resultado da Pesquisa</title>
    <style>
        .user-card { padding: 20px; border: 1px solid #ddd; border-radius: 8px; max-width: 400px; }
        .user-card p { margin: 8px 0; }
    </style>
</head>
<body>
    <h1>Dados do Usuário</h1>
    <div id="userDataContainer" class="user-card"></div>

    <script>
        // 从sessionStorage中取出存储的数据
        const userDataStr = sessionStorage.getItem('userData');
        
        if (userDataStr) {
            const userData = JSON.parse(userDataStr);
            const container = document.getElementById('userDataContainer');
            
            // 根据你的JSON结构动态生成展示内容
            let htmlContent = `
                <p><strong>Nome:</strong> ${userData.nome}</p>
                <p><strong>Idade:</strong> ${userData.idade || 'Não informado'}</p>
                <p><strong>Email:</strong> ${userData.email || 'Não informado'}</p>
                <p><strong>Cidade:</strong> ${userData.cidade || 'Não informado'}</p>
            `;
            
            container.innerHTML = htmlContent;
            
            // 可选：展示后清除存储的数据，避免刷新页面重复显示
            sessionStorage.removeItem('userData');
        } else {
            document.getElementById('userDataContainer').innerHTML = '<p>Nenhum dado encontrado! Volte para a página anterior e faça uma pesquisa.</p>';
        }
    </script>
</body>
</html>

补充小提示 #

• 如果你的JSON数据体积很小，也可以用URL参数传递（比如window.location.href = \result.html?data=${encodeURIComponent(JSON.stringify(userData))}``），但这种方式不适合大体积数据。
• 用sessionStorage的好处是数据临时存储，不会在浏览器中留下冗余信息，关闭页面后自动清除。
• 记得处理各种异常情况，比如网络错误、后端返回错误码，给用户友好的提示。

内容的提问来源于stack exchange，提问作者Matheus Alcântara