Javascript 如何在Ajax POST提交（Django表单）后允许页面刷新/重定向

我是一名客户端新手，正在学习诀窍，需要澄清Ajax概念

e.preventDefault（）

是JS中防止表单提交（页面刷新）的典型方法

上面提到的一个用例是基于Ajax的表单提交。示例代码是：

function overwrite_default_submit(e) {
  // block the default behavior
  e.preventDefault();

  // create and populate the form with data
  var form_data = new FormData();
  form_data.append("reply", text_field.value);

  // send the form via AJAX
  var xhr = new XMLHttpRequest();
  xhr.open('POST', e.target.action);
  xhr.setRequestHeader("X-CSRFToken", get_cookie('csrftoken'));
  xhr.send(form_data);
}

我有两个问题：

1） 假设

POST

请求被发送到一个函数，该函数以

重定向到另一个URL结尾。例如，我使用Django开发web应用程序；典型的Django视图可能会以返回重定向（“主页”）

结束，其中主页是所述应用程序的主页。在这种情况下，

preventDefault（）

如何防止服务器端代码中的

redirect

语句执行？我正试图理解它背后的确切机制

2） 如果在Ajax POST请求之后希望页面刷新（或重定向）正常进行，该怎么办？需要做哪些调整？我希望看到一个说明性的例子来澄清我的概念

我精通Django（Python），所以如果您需要显示服务器端代码，Django将是一个很好的例子

注意：我更倾向于使用纯JS，因为我现在正在学习JS。JQuery在我的雷达上，但只有在我掌握了JS的基本原理之后。

该

preventDefault（）

取消事件，默认操作元素的事件不会发生。这将简单地停止该语句之后javascript代码的进一步执行

例如。 -单击

submit

按钮，阻止其提交表单。 -单击

链接

，防止

链接

遵循给定的

URL

重定向到下一个页面或添加通知，或者可能是通过javascript添加html，但这里只重定向

xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) //Here we need to check OK response and last state of ajax call.
        {
            window.location.href = 'REDIRECT_URL'
            window.location.reload() // To refresh page.    
        }
    }; 

==我已经在你的函数中添加了这个===

function overwrite_default_submit(e) 
{
    // block the default behavior
    e.preventDefault();

    // create and populate the form with data
    var form_data = new FormData();
    form_data.append("reply", text_field.value);

    // send the form via AJAX
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) //Here we need to check OK response and last state of ajax call.
        {
            window.location.href = 'REDIRECT_URL'
            window.location.reload() // To refresh page.    
        }
    };  
    xhr.open('POST', e.target.action);
    xhr.setRequestHeader("X-CSRFToken", get_cookie('csrftoken'));
    //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(form_data);
}

现在，对于Django，您还需要添加视图/调用适当的操作，该操作应返回json或xml

from django.http import JsonResponse
def some_view(request):
    return JsonResponse({"key": "value"})

要了解ajax是如何工作的，您可以在此处查看

1）ajax请求不应收到重定向响应。通常它应该是一个有效的json字符串。Django为此有一个JsonResponse。如果希望django视图处理ajax数据，则应在后端进行检查，例如：

if request.is_ajax():
    return JsonResponse({'data': data})

2） 您可以使用javascript代码执行重定向，例如：

window.location.href = 'https://stackoverflow.com'

---

谢谢你的解释。有趣的是，您添加了

xhr.setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）发送前的行

发送。当我在代码中包含这一行（未注释）时，POST参数在Django端显示为

None

。如果没有该行，它们将被正确接收。有什么理论吗？contentType是您正在发送的数据类型，所以application/json；charset=utf-8是一个常见的字符集，application/x-www-form-urlencoded也是如此；charset=UTF-8，这是默认值。在我们的例子中，它缺少字符集。默认情况下，已采用。因此，无需显式添加。如果是json类型参数，则需要。如果您尝试使用charset，它将起作用。您也可以在浏览器控制台/检查中使用网络选项卡chrome或FF中的f12来检查这一点。现在你可以接受答案了。