Режим отладки показывает, что когда я нажимаю кнопку «Создать» в новой реализации формы Ajax, ничего не происходит, тогда как раньше с простой формой POST и реализацией перенаправления до того, как она показывала POST и успешное перенаправление 302.
Реализация выглядит следующим образом:
#myapp.py
from flask import Flask, render_template, request, redirect, url_for, jsonify
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgres://user:pass@localhost:5432/todoapp'
db = SQLAlchemy(app)
class Todo(db.Model):
__tablename__ = 'todos'
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}>'
db.create_all()
@app.route('/todos/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()
)
#Index.html using Ajax fetch
<html>
<head>
<title>Todo App</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<form id="form">
<input type="text" name="description" />
<input type="submit" value="Create" />
</form>
<div id="error" class="hidden">Something went wrong!</div>
<ul>
{% for d in data %}
<li>{{d.description}}</li>
{% endfor %}
</ul>
<script>
document.getElementById('form').onsubmit = function(e) {
e.preventDefault();
fetch('/todos/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('todos').appendChild(liItem);
document.getElementById('error').className = 'hidden';
})
.catch(function() {
document.getElementById('error').className = '';
})
}
</script>
</body>
</html>
Приложение отображается как работающее, и при переходе по локальному адресу отображается форма с записями. Отладчик показывает успешный запрос GET как при просмотре страницы. Однако ввод новых записей ничего не делает, метод post, похоже, не срабатывает, и в базу данных ничего не добавляется.
Я искал опечатки, поскольку я знаю, что в реализации Ajax значительно больше строк, но пока не удалось найти ни одной.
Что здесь может быть не так? Я знаю, что это, наверное, что-то очень маленькое, что я пропустил.