Question

我是一个学习绳索的客户端新手，需要澄清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请求被发送到以redirect结尾到另一个URL的函数。例如，我使用Django开发Web应用程序;一个典型的Django视图可能会以return redirect("home")结束，其中home是所述应用程序的主页。在这种情况下，preventDefault()如何阻止服务器端代码中的redirect语句执行？我试图了解它背后的确切机制。

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

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

注意：因为我现在正在学习JS，所以我更喜欢坚持使用纯JS。 JQuery是我的最佳选择，但只有在我掌握了JS的基础知识之后。

Answer 1

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

对于ie - 单击submit按钮，阻止其提交表单。 - 点击link，阻止link关注给定的内容 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如何运作，您可以在此处查看https://www.w3schools.com/xml/ajax_intro.asp

Answer 2

1）Ajax请求不应该接收重定向响应。通常它应该是一个有效的json-string。 Django为此目的有一个JsonResponse。如果您希望django视图处理ajax数据，您应该在后端检查它，例如：

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

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

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

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

2 个答案: