Tengo una aplicación de lista de tareas que agrega un objeto Task a la base de datos y lo agrega a la página, funciona sin problemas. Sin embargo, solo funciona cuando hago clic en el botón Enviar, si presiono la tecla Intro, solo veo los datos ajax en mi navegador como tales:

 {"task": {"id": 1, "title": "example task", "completed": false}}

y tengo curiosidad por saber por qué es esto y si hay una manera de cambiar esta funcionalidad. El tutorial que estoy siguiendo menciona que en mi formulario debo usar <button type="button"> y no <input type = "submit"> porque la escalera "enviará los datos del formulario directamente a la vista TaskList, pero queremos para usar otra forma de enviar solicitudes, por lo que debemos deshabilitar este comportamiento". Me imagino que eso es lo que sucede cuando presiono la tecla Intro.

Código:

html:

 <form id = "createTaskForm" method="post" data-url = "{% url 'task_list_url' %}"> {% csrf_token %} {% for field in form %} {{ field }} {% endfor %} <button id = "createButton" type="button">Sumbit</button> </form> <div id = "taskList"> {% for task in tasks %} {{task.title}} {% endfor %} </div>

JavaScript/jQuery:

 $(document).ready(function(){ $('#createButton').click(function() { // Get form data let serializedData = $('#createTaskForm').serialize(); // Now pass it to TaskList view $.ajax({ url: $("#createTaskForm").data('url'), data: serializedData, type: 'post', success: function(response) { $("#taskList").append(`${response.task.title}`) } }) }); });

Específico de Python: models.py:

 class Task(models.Model): title = models.CharField(max_length=200) date = models.DateTimeField(auto_now_add=True) completed = models.BooleanField(default=False)

urls.py:

 path('tasks/', TaskList.as_view(), name = 'task_list_url')

vistas.py:

 class TaskList(View): def get(self, request): form = TaskForm() tasks = Task.objects.all() return render(request, 'task/task_list.html', {'form': form, 'tasks': tasks}) def post(self, request): form = TaskForm(request.POST) if form.is_valid(): new_task = form.save() # send task object as json response, this return value is what is in success: function(response) return JsonResponse({'task': model_to_dict(new_task)}, status=200) else: return redirect('task_list_url')

Gracias por cualquier ayuda en esto.