jQuery 表单提交后页面重定向

Question

我有一个像这样的表单

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">
  <div class="row flat">
    <input type="hidden" name="cartkey" value="">
    <input type="hidden" name="id" value="2">
    <button type="submit"  value="submit" data-value="2" data-name="id">Buy Now</button>
  </div>
</form>

为了保存表单，我使用了jQuery。因此，现在我的代码看起来像这样：

为了保存表单，我使用了 jQuery。所以，现在我的代码看起来像这样：

 <script type="text/javascript">
    jQuery(document).ready(function() {
      jQuery('button').click(function(){
        var Value = jQuery(this).attr('data-value');
        jQuery('[name="id"]').val(Value);
        jQuery('#add-to-cart').submit();
        window.location = "http://www.page-2.com";
        });
    });
  </script>

但是，在提交表单后，页面没有重定向到另一个页面(http://www.page-2.com)。 所以，有人可以告诉我如何在提交表单后重定向表单吗？

更新 很抱歉，这里无法使用ajax。我想简单地提交表单。

- NewUser

---

从提交后，将重定向到帖子页面。 - Ehsan Sajjad

дҢ еЏҮд»Өд»ҺиҰЁеҚ•зљ„actionе±һжЂ§жЊ‡е®љзљ„йҰµйқұиү›иҰЊй‡Қе®љеђ‘гЂ‚ - asprin

请告诉我我的解决方案是否有效，这样我就可以帮助您找到其他可能的方法。 - Chintan Soni

Answer 1

你可以在你的操作中处理这个问题，通过从服务器代码调用onSubmit()将其重定向到你想要的页面。

或者你需要使用ajax post()调用，在调用完成时提供onSuccess和onFailure事件。像这样：

$('#add-to-cart').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        dataType: 'json',
        success: function(json) {
           window.location.href = "http://www.page-2.com";
        }
    })
    return false;
});

- Zaheer Ahmed

---

抱歉，我无法使用Ajax。我必须使用提交函数提交表单。 - NewUser

那么选择选项1，在您调用onsubmit的操作中处理它。 - Zaheer Ahmed

如果您不使用ajax进行提交，那么您必须从处理表单的php页面重定向到www.page-2.com，并使用以下php代码：<?php header("Location: http://www.page-2.com");?> 注意：没有ajax，您无法返回到上一页，因此window.location.href = "http://www.page-2.com";将永远不会被调用。 - Fares M.

Answer 2

如果您不使用ajax，表单将被提交，并且浏览器将重定向到表单的操作url。唯一在提交后进行重定向的方法是在操作表单的处理程序中执行它。但是，您可以添加一个带有要重定向到的URL的参数。

与涉及ajax的解决方案相比，该解决方案的唯一优点是不需要JavaScript。无论是否启用了JavaScript，它都可以工作。

- Maurice Perry

---

主要部分将在服务器端进行。您在服务器端使用哪种语言？ - Maurice Perry

我正在使用PHP。但是我想通过jQuery提交表单，并在提交表单后重定向页面。很抱歉，我无法更改服务器文件。 - NewUser

在这种情况下，您唯一的选择是使用ajax。 - Maurice Perry

没有使用Ajax是不可能的吗？ - NewUser

让我们在聊天室中继续这个讨论。 - NewUser

等一下。还有另一个解决方案：您可以将iframe用作表单的目标。 - Maurice Perry

Answer 3

我是这样做的：

html：

                    <form action="javascript:searchItem();">
                        <div class="searchbox">
                            <div class="search-inner">
                                <div class="item-input">
                                    <input type="text" id="itemName" placeholder="Search Product" required/>
                                </div>
                                <div class="item-after">
                                    <input type="submit" value="" class="button-search"/>
                                </div>
                            </div>
                        </div>
                    </form>

Javascript：

function searchItem() {

    $.ajax({
        url: urlDomain + "pricelist/?itemName=" + $("#itemName").val(),
        type: "GET",
        headers: {"Accept": "application/json", "Content-Type": "application/json"},
        success: function(data) {
            // do your work on success and then,
            location.href = "path/to/next/Page/To/Display.html";
        },
        error: function() {
            alert("error");
        }
    });
}

我编写了上述代码以从服务器获取值，但您可以更改jQuery的“Type”参数为“POST”，并添加“data”参数及其要发送到服务器的值。

希望它能对您有所帮助...

- Chintan Soni

Answer 4

使用 onsubmit="return false;" 禁用表单提交。

HTML

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">

js

<script>
      $(document).ready(function() {
          $('button').click(function(){
             var form = $(this).parents('form');

             $.ajax({
                 type: 'POST',
                 url: $(this).attr('action'),
                 data: form.serialize(),
                 dataType: 'json',
                 success: function(response) {
                      window.location.href = "http://www.page-2.com";
                 }
             });
             return false;
           });
      });
</script>

将action属性值保留为备用方案，这样即使客户端启用或禁用了JavaScript，您的表单也能正常工作。

- Fares M.

Answer 5

我知道这是一个老问题，但我找到了一种不同的提交表单后重定向的方法。

首先，再次强调<form>标签的基础知识，因为OP实际上是一个新用户，提交表单已经内置了重定向。如果你改变原始的HTML代码：

<form id="add-to-cart" name="my-form" action="http://www.example.com" method="post">

to:

<form id="add-to-cart" name="my-form" action="http://www.page-2.com" method="post">

然后点击提交<button>将自动重定向您。

然而，也许新用户希望在提交表单时始终停留在www.example.com上，并且只有在提交完成后才会重定向到www.page-2.com？我今天在工作中遇到了这种情况。

在我的情况下，我们有一个包含表格数据的表单。用户可以更改数据，然后单击提交按钮（称为“保存”）将更改保存到数据库中。 <form>的操作仅刷新了表单/表格页面，因为我们希望用户留在该页面上。

我们还在该页面上放置了一个链接，可以将您带到另一个页面，但我必须确保在重定向之前自动保存所有数据。因此，我使链接提交表单，然后重定向。这是使用jQuery完成的，而不需要Ajax。这里是适用于NewUser代码的代码：

（<form>未更改，action =“http://www.example.com”）

<script type="text/javascript">
$(document).ready(function() {
  // The link has class="linky-link" for easy selecting and href="http://www.page-2.com".  I did not use an id because I had multiple nearly identical links on the same page.
  $(".linky-link").on("click", function(e) {
    e.preventDefault();  // Don't redirect yet!
    var $form = $("#add-to-cart");  // $form instead of form because it's shorthand for a jQuery selector - not strictly necessary, but helpful
    $form.append("<input type='hidden' name='link_redirect' value='" + this.href + "'>");  // This is added to the end of the form and triggers the redirect after the saving is done
    $form.submit(); // Submitting the form saves the data, and then redirects
    });
});
</script>

（注意：确保这段JavaScript位于php文件的底部，一旦所有内容都加载完成）

- Anazul