jQuery post方法和成功后重定向

Question

我正在尝试使用jquery来发布方法。 我使用它的形式并与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()'才会'php/text.php', $('form#order').serialize()' ...

编辑：

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

Bootstrapvalidator：

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

您编写的代码不执行任何“验证”。

此$('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或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');;
            };
          });
       });