1

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

我在以下位置发现了一个类似的问题：使用 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);
    }
    });
}
4

5 回答 5

2

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

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

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

于 2013-07-09T16:16:32.377 回答
1

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

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

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

所以 GET 流程是这样的：

  1. 在 URL 栏中输入地址
  2. 按“走”
  3. GET 请求被发送到您的服务器
  4. 您的服务器使用要呈现的 HTML 进行响应

POST是这样的：

  1. 填写表格
  2. 按“提交”按钮
  3. POST 请求被发送到您的服务器
  4. 您拿起 POST 变量并处理它们（可能保存到数据库或类似的）
  5. 您的服务器使用要呈现的 HTML 进行响应

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

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

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

这将是新的流程：

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

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

于 2013-07-09T16:16:13.937 回答
0

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

于 2013-07-09T16:12:42.027 回答
0

如果您尝试在重定向之前等待 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'
    }
});
于 2013-07-09T16:17:24.767 回答
0

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

希望能帮助到你。

于 2013-07-09T16:17:40.873 回答