Jquery post 方法，成功后重定向

Question

我正在尝试使用 jquery 创建一个 post 方法。我在表单中使用它并使用 bootstravalidator 来验证它。验证成功后，表单得到 posted 并且 php 开始运行。现在我正在尝试在成功 post 后重定向到另一个页面。这是代码：

$('#buy').click(function() {
$.post('php/text.php', $('form#order').serialize(), function () {window.location.href = "index.html";});
});

我尝试了几次，但无法正确获取 window.location.href = "index.html";。即使验证错误，表单也会被重定向，或者根本没有任何反应....

我觉得很奇怪，因为 'php/text.php', $('form#order').serialize()' 只有在验证正确时才会生效...

编辑：

我也在使用 bootstrapvalidator 来验证表单。验证工作完美，如果一切正常，post 方法将被执行。

引导程序验证器：

$(document).ready(function() {
        var validator = $('#order').bootstrapValidator({
            fields: {
                email : {
                    message : "write email adress", 
                    validators : {
                        notEmpty : {
                            message : "Show Email adress"
                        },
                        stringLength : {
                            min : 6,
                            max: 35,
                        }
                    }
                },
            }
        });
      });

编辑2：

HTML:

<form id="order">
  <input type="text" name="name"/><br>
  <input type="text" name="email"/><br>
  <textarea name="comment"></textarea><br>
  <button type="submit" name="send" id="buy">Send</button>
</form>

Answer 1

单击 #buy 按钮后，您的表单已提交，即使您的 javascript 代码运行，页面也会刷新。如果你想禁用表单的提交，你可以使用 $(form).on('submit', function() { return fase; }).

这是更新后的代码：

$('#order').on('submit', function() {
    $.post('php/text.php',
          $('form#order').serialize(),
          function () {
              window.location.href = "index.html";
          }
    );
    return false;
});

更新

既然您使用了 bootstrapvalidator，那么您也应该在提交过程中使用该插件（该插件有一个您应该使用的 submitHandler 函数）

这是更新后的验证器代码：

$(document).ready(function() {
    var validator = $('#order').bootstrapValidator({
        fields: {
            email : {
                message : "write email adress", 
                validators : {
                    notEmpty : {
                    message : "Show Email adress"
                    },
                    stringLength : {
                        min : 6,
                        max: 35,
                    }
                }
            },
        },
        submitHandler: function(validator, form, submitButton) {
            $.post('php/text.php',
                form.serialize(),
                function () {
                    window.location.href = "index.html";
                }
            );
    });
});

Answer 2

我觉得你搞错了。

我不确定 "bootstrapvalidator" 是什么意思。 Bootstrap 本身不提供验证，仅提供其他验证表单元素的视觉指示。

您编写的代码没有执行任何操作 "validation"。

此 $('form#order').serialize() 将序列化您的表单，并且仅包含 "successful" 个表单元素（有关 "successfull" 的定义，请参阅 https://api.jquery.com/serialize/ and https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2）。所有其他表单元素将被排除在外，如果所有表单元素不是 "successful".

，则会导致空字符串

无论如何，此字符串（无条件地）被提供给 $.post() 方法，因此 POST 请求将始终是运行。如果 POST 请求成功（意味着状态代码为 2xx 或 304），将执行带有重定向的成功处理程序。

因此，为了实现您的目标，您必须在发送 POST 请求之前对表单进行某种验证 。您可以手动执行此操作，也可以使用用于表单验证的 jquery 或 bootstrap 插件之一。

Answer 3

我找到了解决方案

        $(document).ready(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
              });

        $(#button).click(function() {
             var validator = $('#order').bootstrapValidator({
                    fields: {
                        email : {
                            message : "write email adress", 
                            validators : {
                                notEmpty : {
                                    message : "Show Email adress"
                                },
                                stringLength : {
                                    min : 6,
                                    max: 35,
                                }
                            }
                        },
                    }
                }).bootstrapValidator('validate');
            var isValid = true;
            if($('#order').find('div.has-error').length > 0){
            isValid = false;
            };
            if (isValid == true){
                $.post('php/text.php', $('form#order').serialize());
                $(location).attr('href','success.html');;
            };
          });
       });

Jquery post 方法，成功后重定向

Jquery post method and redirect after success

html

php

forms

jquery

bootstrapvalidator

更新