Flask应用中AJAX POST请求无响应问题排查求助

使用Flask开发Web应用时，注册页面点击提交按钮后无任何反应，浏览器开发者工具网络面板无XHR请求，控制台也无日志输出。已检查jQuery引入、服务器状态、路由配置等，但仍无法定位问题。

相关代码片段 #

app.py #

from flask import Flask, render_template, request

app = Flask(__name__)

from user import routes

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'GET':
        return render_template("login/home.html")
    else:
        print("do not know")

# @app.route('/dashboard/')
# def dashboard():
#     return render_template("login/dashboard.html")

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

user/models.py #

from flask import Flask, jsonify

class User:
    def signup(self):
        user ={
            "_id":"",
            "name":"",
            "email":"",
            "password":""
        }
        return jsonify(user), 200

user/routes.py #

from flask import Flask
from __main__ import app
from user.models import User

@app.route('/user/signup', methods=['POST'])
def signup():
user = User()
return user.signup()

base.html #

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="/static/js/jquery.js"></script>
    <script src="/static/js/scripts.js"></script>
  </head>
  <body>
    {% block login_content %}
        
    {% endblock login_content %}
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  </body>
</html>

home.html #

{% extends 'login/base.html' %}
{% block login_content %}

<div class="container d-flex justify-content-center mt-5">
    <div class="card w-75 d-flex flex-column flex-wrap">
        <div class="container-fluid card-header">
            Featured
        </div>
        <div class="card-body">
            <form class="container-fluid" id = "signup_form" name="signup_form">
                <div class="mb-3 d-md-flex">
                    <label for="register_name" class="form-label col-md-2">Name</label>
                    <input type="text" class="form-control" id="register_name" name="register_name">
                </div>
                <div class="mb-3 d-md-flex">
                    <label for="register_email" class="form-label col-md-2">Email address</label>
                    <input type="email" class="form-control" id="register_email" name="register_email">
                </div>
                <div class="mb-3 d-md-flex">
                    <label for="register_password" class="form-label col-md-2">Password</label>
                    <input type="password" class="form-control" id="register_password" name="register_password">
                </div>
                <!-- <div class="mb-3 form-check">
                    <input type="checkbox" class="form-check-input" id="exampleCheck1">
                    <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div> -->
                <button type="submit" id="submit_signup_form" class="btn btn-primary">Sign Up</button>
            </form>
        </div>
    </div>
</div>
{% endblock login_content %}

script.js #

$("#signup_form").submit(function(e) {

    var $form = $(this);
    var $error = $form.find(".error");
    var data = $form.serialize();
  
    $.ajax({
      url: "/user/signup",
      type: "POST",
      data: data,
      dataType: "json",
      success: function(resp) {
        // window.location.href = "/dashboard/";
        console.log(resp)
      },
      error: function(resp) {
        // $error.text(resp.responseJSON.error).removeClass("error--hidden");
        console.log(resp)
      }
    });
  
    e.preventDefault();
  });

已检查内容 #

• 确认jQuery正确引入，JavaScript文件路径无误
• 服务器正常运行且可通过指定URL访问
• Flask路由配置看似正确，但浏览器无预期响应
• 已尝试切换使用表单ID和名称绑定事件

问题排查与修复方案 #

1. DOM加载顺序错误 #

问题：script.js在<head>中加载时，页面DOM尚未完全渲染，$("#signup_form")无法找到目标表单元素，导致提交事件绑定失败。
修复：

• 方案一：将script.js的引入移到</body>标签前（Bootstrap脚本之后）：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
  <script src="/static/js/jquery.js"></script>
  <script src="/static/js/scripts.js"></script>
  </body>
  

• 方案二：在script.js中用$(document).ready()包裹事件绑定代码：

  $(document).ready(function() {
      $("#signup_form").submit(function(e) {
          var $form = $(this);
          var $error = $form.find(".error");
          var data = $form.serialize();
        
          $.ajax({
            url: "/user/signup",
            type: "POST",
            data: data,
            dataType: "json",
            success: function(resp) {
              console.log(resp)
            },
            error: function(resp) {
              console.log(resp)
            }
          });
        
          e.preventDefault();
      });
  });
  

2. 路由文件语法错误 #

问题：user/routes.py中signup函数内的代码没有正确缩进，会导致Flask无法加载该路由，甚至启动报错。
修复：修正代码缩进：

@app.route('/user/signup', methods=['POST'])
def signup():
    user = User()
    return user.signup()

3. 验证事件绑定有效性 #

在script.js的提交事件处理函数开头添加日志，确认事件是否被触发：

$("#signup_form").submit(function(e) {
    console.log("表单提交事件已触发"); // 添加此行
    // 剩余代码...
});

如果控制台输出该日志，说明事件绑定成功，可进一步检查AJAX请求细节；如果无输出，回到DOM加载顺序问题排查。

4. 调整默认行为阻止时机 #

将e.preventDefault()移到AJAX代码之前，避免因AJAX代码异常导致默认表单提交行为未被阻止：

$("#signup_form").submit(function(e) {
    e.preventDefault(); // 移到此处
    var $form = $(this);
    var $error = $form.find(".error");
    var data = $form.serialize();
  
    $.ajax({
      // AJAX配置...
    });
});

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