如何在无jQuery时实现Python Flask向AJAX传输JSON数据

当然可行！完全不需要依赖jQuery，原生JavaScript有两种常用方案可以实现：Fetch API（现代浏览器推荐，语法更简洁）和传统的XMLHttpRequest（兼容老旧浏览器）。我给你分Flask后端和前端实现两部分来演示，覆盖GET和POST两种常见场景。

先写几个基础接口，用于返回数据和接收前端请求：

from flask import Flask, jsonify, request

app = Flask(__name__)

# 示例1：返回静态JSON数据的GET接口
@app.route('/api/data', methods=['GET'])
def get_data():
    # 这里可以替换成从数据库/其他数据源获取的真实数据
    server_data = {
        'message': '来自Flask服务器的问候',
        'items': ['苹果', '香蕉', '橙子'],
        'status': 'success'
    }
    return jsonify(server_data)

# 示例2：接收前端POST数据并返回响应的接口
@app.route('/api/submit', methods=['POST'])
def submit_data():
    # 解析前端发送的JSON数据
    client_data = request.get_json()
    if not client_data:
        return jsonify({'error': '未收到有效数据'}), 400
    
    # 这里可以添加数据处理逻辑（比如存库、计算等）
    response_data = {
        'received_content': client_data,
        'message': '数据已成功接收并处理'
    }
    return jsonify(response_data)

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

方案1：Fetch API（现代浏览器首选） #

发送GET请求 #

// 发起GET请求获取服务器数据
fetch('/api/data')
    .then(response => {
        // 先检查响应状态是否正常
        if (!response.ok) {
            throw new Error(`请求失败！状态码：${response.status}`);
        }
        // 解析JSON格式的响应体
        return response.json();
    })
    .then(data => {
        // 拿到数据后的业务逻辑，比如渲染到页面
        console.log('从服务器获取的数据：', data);
        document.getElementById('result').innerText = `消息：${data.message} | 物品列表：${data.items.join(', ')}`;
    })
    .catch(error => {
        // 捕获请求过程中的错误（比如网络问题、状态码异常）
        console.error('请求出错：', error);
        document.getElementById('result').innerText = '加载数据失败，请稍后重试';
    });

发送POST请求 #

// 准备要发送给服务器的数据
const clientSendData = {
    username: '张三',
    age: 28,
    hobby: '编程'
};

fetch('/api/submit', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        // 如果你的Flask开启了CSRF保护，需要添加CSRF Token头（从cookie中获取）
        // 'X-CSRFToken': document.cookie.split('; ').find(row => row.startsWith('csrf_token=')).split('=')[1]
    },
    body: JSON.stringify(clientSendData), // 将JS对象转为JSON字符串
    // 如果需要携带cookie（比如登录态），添加下面的配置
    // credentials: 'same-origin'
})
.then(response => {
    if (!response.ok) {
        throw new Error(`提交失败！状态码：${response.status}`);
    }
    return response.json();
})
.then(data => {
    console.log('服务器响应：', data);
    document.getElementById('submit-result').innerText = data.message;
})
.catch(error => {
    console.error('提交出错：', error);
    document.getElementById('submit-result').innerText = '提交数据失败，请稍后重试';
});

方案2：XMLHttpRequest（兼容老旧浏览器） #

发送GET请求 #

const xhr = new XMLHttpRequest();
// 初始化请求：方法、URL、是否异步（true为异步）
xhr.open('GET', '/api/data', true);

// 请求成功完成后的回调
xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        // 解析JSON响应
        const data = JSON.parse(xhr.responseText);
        console.log('XMLHttpRequest获取的数据：', data);
        document.getElementById('xhr-result').innerText = `消息：${data.message}`;
    } else {
        console.error('请求失败，状态码：', xhr.status);
    }
};

// 网络请求出错的回调
xhr.onerror = function() {
    console.error('网络连接出错');
};

// 发送请求
xhr.send();

发送POST请求 #

const xhrPost = new XMLHttpRequest();
xhrPost.open('POST', '/api/submit', true);
// 设置请求头，告诉服务器我们发送的是JSON格式数据
xhrPost.setRequestHeader('Content-Type', 'application/json');
// 若开启CSRF保护，添加CSRF Token头
// xhrPost.setRequestHeader('X-CSRFToken', document.cookie.split('; ').find(row => row.startsWith('csrf_token=')).split('=')[1]);

xhrPost.onload = function() {
    if (xhrPost.status >= 200 && xhrPost.status < 300) {
        const data = JSON.parse(xhrPost.responseText);
        console.log('XMLHttpRequest提交响应：', data);
        document.getElementById('xhr-submit-result').innerText = data.message;
    } else {
        console.error('提交失败，状态码：', xhrPost.status);
    }
};

xhrPost.onerror = function() {
    console.error('网络提交出错');
};

// 转换数据格式并发送
const postData = JSON.stringify({username: '李四', age: 32});
xhrPost.send(postData);

• 如果你的Flask应用启用了CSRF保护（比如使用Flask-WTF），发送POST/PUT/DELETE请求时必须携带CSRF Token，代码中我已经添加了相关注释，你可以根据实际情况调整。
• Fetch API默认不会携带cookie，若需要在请求中传递登录态等cookie信息，需要在fetch的配置项中添加credentials: 'same-origin'（同域）或credentials: 'include'（跨域）。
• 现代浏览器基本都支持Fetch API，如果需要兼容IE11及更早版本，建议使用XMLHttpRequest方案。

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