Flask+HTML+jQuery出现405(Method Not Allowed)错误求助

核心问题分析 #

• Python代码中**test = request.getjson这行直接覆盖了定义好的test视图函数**，导致Flask无法正确识别/test路由的POST处理逻辑，直接抛出405错误。
• 其他次要问题：
  • Flask中获取JSON数据的正确方法是request.get_json()（下划线命名，不是驼峰getjson）
  • 视图函数必须返回合法响应，否则会触发500错误
  • HTML中AJAX请求重复对JSON字符串做JSON.stringify，导致数据格式错误
  • 重复初始化Flask实例，代码冗余

修正后的Python代码 #

from flask import Flask, render_template, request, jsonify
import json

# 初始化Flask实例（仅需一次）
app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/test', methods=['POST'])  # 修正methods参数格式
def test():
    print('收到POST请求')
    # 使用Flask官方推荐的get_json()获取解析后的JSON数据
    output = request.get_json()
    print('解析后的JSON数据:', output)
    print('数据类型:', type(output))
    
    # 直接使用解析好的字典，无需再次json.loads
    # 返回合法响应，这里用jsonify返回标准JSON格式响应
    return jsonify({"status": "success", "received_data": output})

# 删掉覆盖视图函数的错误代码：test = request.getjson

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

修正后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户姓名录入</title>
</head>
<body>
    <h1 class="title">用户姓名录入</h1>
    <h2>请输入你的姓名</h2>

    <label for="fname">First Name:</label><input type="text" name="fname" id="fname">
    <label for="lname">Last Name:</label><input type="text" name="lname" id="lname">
    <!-- 将submit类型改为button，避免默认表单提交行为干扰AJAX -->
    <button type="button" onclick='myFunction();'>Enter</button>
    <script
          src="https://code.jquery.com/jquery-3.6.4.min.js"
          integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
          crossorigin="anonymous"></script>
    <script>
        function myFunction() {
            const firstname = document.getElementById('fname').value;
            const lastname = document.getElementById('lname').value;

            const dict_values = {firstname, lastname};
            const s = JSON.stringify(dict_values);
            console.log(s);
            window.alert(s);
            $.ajax({
                url:"/test",
                type:"POST",
                contentType: "application/json",
                data: s,  // 直接传已序列化的JSON字符串，无需再次stringify
                success: function(response) {
                    console.log('请求成功', response);
                    alert('提交成功！');
                },
                error: function(xhr, status, error) {
                    console.log('请求失败', error);
                }
            });
        }
    </script>
</body>
</html>

修复要点总结 #

1. 删掉test = request.getjson这行代码，避免覆盖视图函数
2. 使用request.get_json()替代错误的request.getjson()获取JSON数据
3. 视图函数必须返回合法响应（比如jsonify生成的JSON响应）
4. AJAX请求中直接传递已序列化的JSON字符串，不要重复JSON.stringify
5. 将按钮类型从submit改为button，防止默认表单提交干扰AJAX请求

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