如何用jQuery在HTML中发送POST请求并接收Flask逐字返回内容

Flask后端（app.py） #

from flask import Flask, request, session, Response
import time

app = Flask(__name__)
app.secret_key = 'your_secret_key_here'  # 替换为实际密钥，用于session加密

@app.route('/submit', methods=['POST'])
def submit_text():
    # 接收前端传来的字符串
    input_text = request.form.get('text', '')
    if input_text:
        # 将字符串存入session，供后续SSE接口调用
        session['input_text'] = input_text
        return {'status': 'ok'}
    return {'status': 'error', 'msg': '无输入内容'}, 400

@app.route('/sse')
def sse_stream():
    def generate():
        # 从session获取提交的字符串
        input_text = session.get('input_text', '')
        if not input_text:
            yield 'data: 无可用内容\n\n'
            return
        # 拆分字符串为单词（按空格分割，可按需调整拆分规则）
        words = input_text.split()
        for word in words:
            # 按SSE规范返回数据
            yield f'data: {word}\n\n'
            # 模拟延迟，让流式效果更直观（可选）
            time.sleep(1)
        # 发送传输结束标记
        yield 'data: __END__\n\n'
    
    # 设置SSE响应头
    return Response(generate(), mimetype='text/event-stream')

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

关键说明 #

• /submit接口接收前端POST的字符串，存入session暂存
• /sse接口生成SSE流式响应，逐词返回拆分后的内容
• 用yield实现流式输出，符合SSE的传输规范
• 可根据需求调整单词拆分规则（比如处理标点符号、特殊字符）

前端页面（test.html） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SSE流式演示</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="inputText" placeholder="输入一段文字">
        <button id="submitBtn">提交</button>
    </div>
    <div id="output" style="margin-top: 20px; padding: 10px; border: 1px solid #ccc;"></div>

    <script>
        $(document).ready(function() {
            $('#submitBtn').click(function() {
                const inputText = $('#inputText').val().trim();
                if (!inputText) {
                    alert('请输入内容');
                    return;
                }

                // 清空之前的输出内容
                $('#output').empty();

                // 发送POST请求提交字符串
                $.post('/submit', {text: inputText}, function(res) {
                    if (res.status === 'ok') {
                        // 建立SSE长连接
                        const eventSource = new EventSource('/sse');
                        
                        eventSource.onmessage = function(e) {
                            if (e.data === '__END__') {
                                // 接收完毕，关闭连接
                                eventSource.close();
                                $('#output').append('<br><strong>传输完成</strong>');
                                return;
                            }
                            // 将单词追加到页面容器
                            $('#output').append(e.data + ' ');
                        };

                        eventSource.onerror = function() {
                            eventSource.close();
                            $('#output').append('<br><strong>连接出错</strong>');
                        };
                    }
                }).fail(function() {
                    alert('提交失败，请重试');
                });
            });
        });
    </script>
</body>
</html>

关键说明 #

• 用jQuery发送POST请求提交输入的字符串
• 提交成功后创建EventSource对象，建立SSE长连接
• 监听message事件，逐个接收后端返回的单词并追加到页面
• 收到结束标记__END__后关闭SSE连接，提示传输完成

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