当我通过 AJAX 提交表单时，为什么我的代码会重定向页面？

Question

我的问题在标题中描述的很好，所以我把代码留在下面

这是 HTML：（抱歉缩进，但我不经常使用 Stackoverflow）

    {% block content %}
    <div class="col-8 mt-5">
        <form id="createTaskForm" class="form-inline justify-content-center" method="post" date-url="{% url 'task_list' %}">
            {% csrf_token %}
            {% for field in form %}
                <div class="mx-3">
                    {{ field }}
                </div>
            {% endfor %}
            
            <button id="createButton" class="btn btn-outline-success">
                create
            </button>
        </form>
    </div>
    <div class="col-5 mt-5" id="taskList">
        {% for task in tasks %}
            <div class="card mb-1">
                <div class="card-body">
                    {{ task.title }}
                    <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

Javascript 文件：

$(document).ready(function(){

    $('#createButton').click(function(){
        var serializedData = $('#createTaskForm').serialize()
        
        $ajax({
            url: $("#createTaskForm").data('url'),
            data: serializedData,
            type: 'post',
            success: function(response){
                $("#taskList").append('<div class="card mb-1"><div class="card-body">' + response.task.title + '<button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')
            }
        })
    });

});

最后是来自 Django 的视图：

from django.shortcuts import render, redirect
from django.views.generic import View

from .models import Task
from .forms import TaskForm

from django.http import JsonResponse
from django.forms.models import model_to_dict

class TaskList(View):
    def get(self, request):
        form = TaskForm()
        tasks = Task.objects.all()
        return render(request, 'task/task_list.html', context={'form':form, 'tasks':tasks})

    def post(self, request):
        form = TaskForm(request.POST)
        if form.is_valid():
            new_task = form.save()
            return JsonResponse({'task': model_to_dict(new_task)}, status=200)
        else:
            return redirect('task_list')

希望尽快得到答复，我将不胜感激

Answer 1

第一种方式：修复提交js，并删除createButton按钮的点击功能。

<form>
//pass
<input id='id_submit' type='submit' class='btn btn-primary' value="submit"/>
</form>
$(document).ready(function(){
  $('#createTaskForm').on('submit', function(e){
    $.ajax({//pass
    });
    return false;
  });
});

第二种方式：将createButton按钮放到form标签外，通过按钮的click函数触发提交。

<form>
//pass
</form>
<button id='id_submit' class='btn btn-primary'>Submit</button>
$(document).ready(function(){
  $('#id_submit').on('click', function(e){
    $.ajax({//pass
    });
  });
});

Answer 2

编辑编号 2：

尝试将您的 JQuery ajax 代码更新为此，因为您似乎在代码中使用旧方式：

var serializedData = $('#createTaskForm').serialize();
$.ajax({ url: '{% url 'task_list' %}',
         type: "POST",
         dataType: "json",
         data: serializedData,
         cache: false
       }).done(function(response) {
         $("#taskList").append('<div class="card mb-1"><div class="card-body">' + response.task.title + '<button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')
       });
                   

编辑：

在您的表单中，您将 data-url 分配给 ajax 中的 url，但是，您将 data-url 拼写为“date-url”，因此它每次都会返回空。不仅如此，您的表单甚至会在 Ajax 运行之前发布。试试这个：

javascript：

 function createTask(){
        var serializedData = $('#createTaskForm').serialize()

        $ajax({
            url: '{% url 'task_list' %}',
            data: serializedData,
            type: 'post',
            success: function(response){
                $("#taskList").append('<div class="card mb-1"><div class="card-body">' + response.task.title + '<button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>')
            }
    });
 }

在您的模板中，只需使用：

<form id="createTaskForm" class="form-inline justify-content-center">
            {% csrf_token %}
            {% for field in form %}
                <div class="mx-3">
                    {{ field }}
                </div>
            {% endfor %}
            
            <button id="createButton" onclick="createTask()" class="btn btn-outline-success">
                create
            </button>
        </form>

之前的回复：

在您的帖子中显示，如果表单验证失败，您将返回一个完全呈现的页面，而不是 JSON。你可以尝试这样的事情来看看你得到了什么：

def post(self, request):
        form = TaskForm(request.POST)
        if form.is_valid():
            new_task = form.save()
            return JsonResponse({'task': model_to_dict(new_task)}, status=200)
        else:
            return JsonResponse({'task': None}, status=400)

您不能“重定向”来自 Django 后端的 javascript AJAX 请求，您必须在模板中处理它。

很难判断这是否是您在标题中所指的内容。如果你澄清它，我会更新我的答案。

Answer 3

好吧，两天后我找到了解决方案。这是为我工作的那个。这是代码...

Javascript

    $(document).ready(function(){

    $('#createTaskForm').submit(function(event){
        event.preventDefault()
        var dataSerialized = $('#createTaskForm').serialize()
        $.ajax({
            method: 'post',
            url: $('#createTaskForm').data('url'),
            data: dataSerialized,
            cache: false,
            success: function(response){
                $('#taskList').append(
                    '<div class="card mb-1"><div class="card-body">' + response.task.title + '<button type="button" class="close float-right" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div></div>'
                )
            }
        });

    });

});

HTML

{% block content %}
    <div class="col-8 mt-5">
        <form id="createTaskForm" class="form-inline justify-content-center" method="POST" data-url="{% url 'task_list' %}">
            {% csrf_token %}
            {% for field in form %}
                <div class="mx-3">
                    {{ field }}
                </div>
            {% endfor %}
            <input id='id_submit' type='submit' class='btn btn-primary' value="submit"/>
        </form>

    </div>
    <div class="col-5 mt-5" id="taskList">
        {% for task in tasks %}
            <div class="card mb-1">
                <div class="card-body">
                    {{ task.title }}
                    <button type="button" class="close float-right" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
            </div>
        {% endfor %}
    </div>
{% endblock %}

希望对以后的问题有所帮助。