使用提交按钮通过 ajax 调用视图有效，但按回车键只显示 ajax 字典

Question

我有一个待办事项列表应用程序，它向数据库添加了一个 Task 对象并将其附加到页面，它工作正常。但是，它仅在我单击提交按钮时有效，如果我按下回车键，我只会在浏览器中看到 ajax 数据：

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

我很好奇为什么会这样，是否有办法更改此功能？我正在关注的教程提到在我的表单上我必须使用 <button type="button"> 而不是 <input type = "submit"> 因为阶梯将“将表单数据直接发送到 TaskList 视图，但我们想使用另一种发送方式请求，因此我们需要禁用此行为。”我想这就是我按下回车键时发生的事情？

代码：

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}`)
      }
    })
  });
});

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')

views.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')

感谢您对此的任何帮助。

Answer 1

你正在调用你的 ajax 函数 onclick 这就是为什么当你点击按钮时如果你想调用 ajax 请求输入或点击然后你必须使用 onsubmit 像这样更改您的代码

$(document).ready(function(){

  $('#createTaskForm').on("submit", 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}`)
      }
    })
  });
});

使用提交按钮通过 ajax 调用视图有效，但按回车键只显示 ajax 字典

Calling view via ajax with submit button works, but hitting enter key just displays ajax dictionary

django

ajax

jquery