使用JS+Flask发送POST请求出现500内部错误，求解决方案

前端代码问题修正 #

你前端里用了<input type="text-area">，但HTML不存在text-area这个input类型，文本区域要改用<textarea>标签，否则可能无法正确获取输入值。修正后的前端代码：

<textarea id="promptArea" placeholder="write your story..."></textarea>
<button id="submitButton">Make your story now!</button>
<p>your story here...</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('#submitButton').click(function (event) {
        event.preventDefault();
        $('#submitButton').prop("disabled", true);
        $.ajax({
             data : { prompt : $('#promptArea').val() },
             type : 'POST',
             url : '/prompt',
             success: function (data) { 
                 console.log('Sent Successfully');
                 $('#submitButton').prop("disabled", false);
             },
             error: function (e) { 
                 console.log('Submission failed...');
                 $('#submitButton').prop("disabled", false);
             }
        });
    });
})
</script>

后端代码问题修正 #

500错误基本是后端代码抛出异常导致的，重点检查以下几点并修正：

1. 必须导入Flask的request对象；
2. 要区分POST和GET请求，GET请求时调用request.form['prompt']会直接报错；
3. 确保chatbot对象已经完成初始化，调用chat()方法不会触发异常；
4. 205状态码不适用于常规响应，建议改用标准的200状态码。

修正后的后端代码：

from flask import Flask, request

app = Flask(__name__)
# 确保此处已正确初始化chatbot实例，例如：
# chatbot = YourChatBotImplementation()

@app.route('/prompt', methods=['POST', 'GET'])
def prompt():
    if request.method == 'POST':
        # 用get方法避免key不存在时报错，可设置默认空值
        prompt_content = request.form.get('prompt', '')
        if not prompt_content:
            return "Prompt cannot be empty", 400
        
        try:
            chatbot.chat(prompt_content)
            return "works", 200
        except Exception as e:
            # 打印异常信息方便调试
            print(f"Error processing prompt: {str(e)}")
            return "Internal server error", 500
    # GET请求返回提示信息
    return "Send a POST request with prompt data", 200

调试技巧 #

• 查看Flask控制台的错误日志，500错误会输出具体异常信息，这是最快定位问题的方式；
• 用浏览器开发者工具的Network标签，检查POST请求的参数是否正确发送；
• 先简化后端逻辑，比如注释掉chatbot.chat()，只返回固定内容，验证前后端通信正常后再逐步恢复业务代码。

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