AJAX无刷新提交数据失败：未写入数据库且URL出现GET参数求助

问题现象 #

点击提交按钮后，数据未写入数据库，URL变为http://127.0.0.1:5000/?description=New+to+do+statement+4，说明表单触发了默认的GET提交逻辑，AJAX功能未生效。

错误点及修复方案 #

1. 阻止表单默认提交的语法错误

JavaScript中e.preventDefault():末尾误用冒号，应为分号。该错误会导致代码中断，无法阻止表单默认提交行为，直接触发GET请求跳转。

2. 输入框ID缺失

HTML中输入框的id属性为空，document.getElementById('description')无法获取输入值，导致AJAX提交内容为空，后端接收失败。需给输入框添加id="description"。

3. JavaScript变量拼写与DOM元素缺失

• console.log(jsonresponse)中变量名拼写错误，应为jsonResponse（大小写不一致）；
• 页面中的<ul>没有id="todo"，document.getElementById('todo').appendChild(liItem)无法找到目标列表，新Todo无法添加到页面。需给<ul>添加id="todo"。

4. Flask后端潜在问题

• db.create_all()需要在Flask应用上下文内执行，否则可能无法创建数据库表；
• 建议开启SQLALCHEMY_TRACK_MODIFICATIONS = False避免框架警告。

修正后的代码 #

HTML与JavaScript代码

<html>
    <head>
        <title>Todo App</title>
        <style>
        .hidden{
            display:none;
        }</style>
    </head>
    <body>

        <form id="form">
            <!-- 补充输入框ID -->
            <input type="text" name="description" id="description">
            <input type="submit" value="Create">
        </form>

        <div id="error" class="hidden">Something went wrong</div>
        <!-- 给列表添加ID -->
        <ul id="todo">
            {% for d in data %}
                <li>{{d.description}}</li>
            {% endfor %}    
        </ul>

        <script>
            document.getElementById('form').onsubmit = function (e) {
                // 修正阻止默认行为的语法
                e.preventDefault();
                fetch('/todo/create', {
                    method: 'POST',
                    body: JSON.stringify({
                        'description': document.getElementById('description').value
                    }),
                    headers: {
                        'Content-Type' : 'application/json'
                    }
                })
                .then(function(response) {
                    return response.json();
                })
                .then(function(jsonResponse){
                    // 修正变量名拼写
                    console.log(jsonResponse);
                    const liItem= document.createElement('LI');
                    liItem.innerHTML = jsonResponse['description'];
                    document.getElementById('todo').appendChild(liItem);
                    document.getElementById('error').className='hidden';
                })

                .catch(function(){
                    document.getElementById('error').className = '';
                })
            }
        </script>
    </body>
</html>

Python（Flask）后端代码

from flask import Flask, render_template, request, redirect, url_for, jsonify
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgresql://postgres:MassRay12@localhost:5432/todoapp'
# 开启配置避免框架警告
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)

class Todo(db.Model):
    __tablename__ = 'todo'
    id = db.Column(db.Integer, primary_key=True)
    description = db.Column(db.String(), nullable=False)

    def __repr__(self):
        return f'<Todo {self.id} {self.description}>'

# 在应用上下文内创建数据库表
with app.app_context():
    db.create_all()

@app.route('/todo/create', methods=['POST'])
def create_todo():
    description = request.get_json()['description']
    todo = Todo(description=description)
    db.session.add(todo)
    db.session.commit()
    return jsonify({
        'description': todo.description
    })

@app.route('/')
def index():
    return render_template('index.html', data = Todo.query.all())

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