看起来你已经搭好了后端的路由框架，但前端还缺少发起请求并处理返回JSON的逻辑，我来帮你一步步搞定这个问题：

你当前用json.dumps()返回数据，其实Flask自带的jsonify()方法更合适——它会自动设置正确的HTTP响应头（Content-Type: application/json），让前端解析JSON数据更顺畅：

from flask import jsonify  # 别忘了导入这个方法

@app.route('/getUser', methods=['GET'])
def getUser():
    main = Main()
    value = request.args.get('user_name')
    user = main.getValues(value)
    print(json.dumps(user))
    return jsonify(user)  # 替换原有的return语句

你需要在模板中添加代码，监听按钮的点击事件，发起AJAX请求到/getUser路由，再把返回的JSON数据渲染到页面的label里。这里先给你原生JavaScript的实现（不需要依赖任何库）：

把这段代码放在模板的</form>标签之后，或者页面底部的</body>标签之前：

<script>
// 获取页面上需要用到的元素
const searchBtn = document.getElementById('btn_pesquisar');
const userNameInput = document.getElementById('user_name');
const idLabel = document.getElementById('id');
// 如果还有其他要展示的字段（比如姓名、邮箱），同样用getElementById获取对应的label

// 监听按钮点击事件
searchBtn.addEventListener('click', async (e) => {
    e.preventDefault(); // 阻止表单默认的提交行为，避免页面刷新
    const userName = userNameInput.value.trim();
    
    // 先校验输入是否为空
    if (!userName) {
        alert('请输入用户名');
        return;
    }

    try {
        // 发起GET请求，带上user_name参数（用encodeURIComponent处理特殊字符）
        const response = await fetch(`/getUser?user_name=${encodeURIComponent(userName)}`);
        
        // 检查请求是否成功
        if (!response.ok) {
            throw new Error(`请求失败：${response.status}`);
        }

        // 解析返回的JSON数据
        const user = await response.json();
        
        // 将数据填充到对应的label中
        idLabel.textContent = `用户ID：${user.id}`;
        // 示例：如果还有姓名字段，就这么写
        // nameLabel.textContent = `姓名：${user.name}`;
    } catch (error) {
        // 捕获并处理错误
        console.error('获取用户数据出错：', error);
        alert('获取用户信息失败，请稍后重试');
    }
});
</script>

要保证main.getValues(value)返回的user是一个可序列化为JSON的Python字典，比如类似这样的结构：

# 示例user字典结构
user = {
    'id': 123,
    'name': 'Matheus Alcântara',
    'email': 'example@domain.com'
}

这样前端才能正确解析并提取对应的字段。

可选：用jQuery实现（更简洁） #

如果你习惯用jQuery，代码会更短，前提是你的页面已经引入了jQuery库：

$('#btn_pesquisar').click(function(e) {
    e.preventDefault();
    const userName = $('#user_name').val().trim();
    
    if (!userName) {
        alert('请输入用户名');
        return;
    }

    $.get('/getUser', { user_name: userName }, function(user) {
        $('#id').text(`用户ID：${user.id}`);
        // 其他字段同理，比如$('#name').text(`姓名：${user.name}`);
    }).fail(function(error) {
        console.error('获取用户数据出错：', error);
        alert('获取用户信息失败，请稍后重试');
    });
});

做完这些修改后，点击"Pesquisar"按钮，前端就会发送请求到后端获取用户的JSON数据，然后自动把数据显示到页面对应的label里啦。

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