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

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

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

---

希望能尽快得到回复，我非常感谢您的解释

编辑编号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>')
       });
                   

您不能从Django后端“重定向”javascript AJAX请求，您必须在模板中处理该请求

---

很难说这是否就是你在标题中所指的。如果您澄清，我将更新我的答案。

编辑第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>')
       });
                   

您不能从Django后端“重定向”javascript AJAX请求，您必须在模板中处理该请求

很难说这是否就是你在标题中所指的。如果您澄清，我将更新我的答案。

第一种方法：修复submit js，并删除createButton的单击功能。

//通过
$（文档）.ready（函数（）{
$（'#createTaskForm'）。在（'submit'，函数（e）上{
$.ajax（{//pass
});
返回false；
});
});

第二种方式：将createButton按钮放在表单标签之外，通过按钮的点击功能触发提交。

//通过
提交
$（文档）.ready（函数（）{
$（'id_submit'）。在（'click'，函数（e）{
$.ajax（{//pass
});
});
});

第一种方法：修复submit js，并单击createButton按钮的功能。

//通过
$（文档）.ready（函数（）{
$（'#createTaskForm'）。在（'submit'，函数（e）上{
$.ajax（{//pass
});
返回false；
});
});

第二种方式：将createButton按钮放在表单标签之外，通过按钮的点击功能触发提交。

//通过
提交
$（文档）.ready（函数（）{
$（'id_submit'）。在（'click'，函数（e）{
$.ajax（{//pass
});
});
});

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

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

    });

});

$（文档）.ready（函数（）{
$（'#createTaskForm'）。提交（函数（事件）{
event.preventDefault（）
var dataSerialized=$（'#createTaskForm'）。serialize（）
$.ajax({
方法：“post”，
url:$（'#createTaskForm'）。数据（'url'），
数据：数据序列化，
cache:false，
成功：功能（响应）{
$（'#任务列表'）。追加(
''+response.task.title+'×；'
)
}
});
});
});

HTML

{%block content%}
{%csrf_令牌%}
{%形式的字段为%}
{{field}}
{%endfor%}
{tasks%%中任务的%s}
{{task.title}}
&时代；
{%endfor%}
{%endblock%}

---

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

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

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

    });

});

$（文档）.ready（函数（）{
$（'#createTaskForm'）。提交（函数（事件）{
event.preventDefault（）
var dataSerialized=$（'#createTaskForm'）。serialize（）
$.ajax({
方法：“post”，
url:$（'#createTaskForm'）。数据（'url'），
数据：数据序列化，
cache:false，
成功：功能（响应）{
$（'#任务列表'）。追加(
''+response.task.title+'×；'
)
}
});
});
});

HTML

{%block content%}
{%csrf_令牌%}
{%形式的字段为%}
{{field}}
{%endfor%}
{tasks%%中任务的%s}
{{task.title}}
&时代；
{%endfor%}
{%endblock%}

---

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

我的意思是，当我点击“创建”按钮时，会得到一个JSON页面。有没有办法在没有JSON页面的情况下保持在同一页面？我不知道你所说的“JSON页面”{“任务”：{“id”：xx，“title”：“xx”，“complete”：false}“每次我创建任务时都会出现这样的页面，这有什么不对？JsonResponse返回的是JSON响应。请发布你的意思的截图。我能避免吗？我的意思是当我点击创建按钮时，我得到了一个JSON页面。有没有办法在没有JSON页面的情况下保持在同一页面？我不知道你所说的“JSON页面”{“任务”：{“id”：xx，“title”：“xx”，“complete”：false}“每次我创建任务时都会出现这样的页面，这有什么不对？JsonResponse返回的是JSON响应。请发布您的意思的屏幕截图。我可以避免吗？它需要在单击函数中以return false结束，以省略重定向到json页面的操作吗？$（“#createButton”）。单击（函数（）{//your code；return false；}）；反正没用，谢谢还有一个虫子。您需要将button标记元素放在表单标记元素之外。它需要在click函数中以return false结束，以省略重定向到json页面的操作。$（'#createButton'）。单击（函数（）{//your code；return false；}）；反正没用，谢谢还有一个虫子。您需要将按钮标记元素放到表单标记元素之外。

 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>

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)

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

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

    $(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>'
                )
            }
        });

    });

});

{% 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 %}