Jquery post方法和成功后重定向

Question

我正在尝试使用 jquery 创建一个 post 方法。我正在以一种形式使用它，并使用 bootstravalidator 来验证它。成功验证后，表单被发布并且 php 开始运行。现在我试图在成功发布后重定向到另一个页面。代码如下：

$('#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,
                        }
                    }
                },
            }
        });
      });

EDIT2：

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 本身不提供验证，仅提供经过验证的表单元素的视觉指示。

您编写的代码没有进行任何“验证”。

此$('form#order').serialize() 将序列化您的表单，并且仅包含“成功”表单元素（有关“成功”的定义，请参见https://api.jquery.com/serialize/ 和https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2）。所有其他表单元素都将被忽略，如果所有表单元素都不“成功”，则会导致一个空字符串。

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

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

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');;
            };
          });
       });