Question

我有一个标准表单，底部有一些文本输入和一个提交按钮。它的操作当前重定向到我的主页，但我希望它提交表单，然后重定向一两秒钟。

我在Delay page redirect after form submit using jquery / js?找到了类似的问题，但答案只是延迟了一段时间，然后同时提交和重定向。

如果有任何帮助，这是我的表格的迷你版

<form action="/home" onsubmit="createAdd({{ newID }}, {{ user.get_profile.id }})" class="form-horizontal" method="post">{% csrf_token %}
 <div class="control-group">
    <label class="control-label" for="newName">Name*</label>
    <div class="controls">
      <input type="text" name="newName" id="name" required>
   </div>
  </div>
  <div class="control-group">
    <div class="controls">
      <button type="submit" class="btn btn-primary" value="Create"><i class="icon-wrench icon-white"> </i> Create </button>
    </div>
  </div>
</form>

我的AJAX：

function createAdd(event, user){  

    $.ajax({
    url: '/eventsearch/eventsearch/createCustom/',
    type: "POST",
    data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user},
    success: function(){
        window.setTimeout(function () {
            window.location.href = '/eventsearch/eventsearch/';
        }, 2000);
    }
    });
}

Answer 1

如果您通过AJAX提交，那么您需要在AJAX调用的成功回调中设置重定向（及其延迟）。像这样：

$.ajax({
    // other AJAX options
    success: function () {
        window.setTimeout(function () {
            window.location.href = someUrl;
        }, 2000);
    }
});

这应该在AJAX成功后等待2秒，然后将用户重定向到新页面。

Answer 2

当您在浏览器网址栏中输入网址时，您正在向该网址提交“GET”请求。

当您提交表单时，您正在发送“POST”请求。

这些请求都会发送一些（或没有）数据并收到“响应”。在你目前的情况下，我认为两者的响应只是你的页面的标准HTML输出，然后在浏览器中呈现（在你完成一些处理之后）。

所以GET流程是这样的：

在网址栏中输入地址
按“go”
GET请求已发送到您的服务器
您的服务器使用HTML进行回复

POST就像这样：

填写表格
按“提交”按钮
POST请求已发送到您的服务器
你拿起POST变量并处理它们（可能保存到DB或类似）
您的服务器使用HTML进行回复

如您所见，在这些情况下，SUBMIT是REDIRECT的一部分。

您需要做的是分支处理POST表单，然后重定向到您要显示的页面。

要执行此操作，您需要创建另一个PHP脚本，该脚本将处理POST请求，执行处理并返回成功消息。然后，您需要将用户重定向到您希望重定向到的相关页面。

这将是新流程：

填写表格
按“提交”按钮
Javascript创建对处理URL的AJAX POST调用：
1. 处理脚本获取所有POST变量并执行所需（保存到DB或其他任何内容）
2. 处理脚本返回HTTP / 1.1 200 OK响应。
成功javascript然后启动计时器并在几秒钟后将用户重定向到成功页面。

我希望这是有道理的。如果您需要更多信息，请告诉我。

Answer 3

我认为你想要做的是通过ajax提交表单（使用jquery form plugin http://malsup.com/jquery/form/之类的东西），然后从成功回调中重定向。

Answer 4

如果您在重定向之前尝试等待ajax提交，则可以成功重定向。

function createAdd(event, user){  

  $.ajax({
    url: '/eventsearch/eventsearch/createCustom/',
    type: "POST",
    data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user},
    success: function(){
      window.location = '/redirect/goes/here'
    }
});

Answer 5

使用ajax，您需要等到调用done回调，因为这意味着您的POST请求成功，然后您可以重定向用户。像这样：

function createAdd(event, user){  
  $.ajax({
  url: '/eventsearch/eventsearch/createCustom/',
  type: "POST",
  data: {name: name, loc: loc, start: start, end: end, tags: tags, event_id: event, profile: user}
  })
  .done(function(result) {
    // redirect as you like
    window.location.href = 'http://stackoverflow.com'
  })
  .fail(function(jqXHR, textStatus) {
    // your request failed so do not redirect and handle the error
  });
}

希望它有所帮助。

我想延迟表单操作，但在重定向之前仍然提交它

5 个答案: