更新

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方法就会被执行。

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

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()会序列化您的表单，并且只包含“成功”表单元素（有关“successl”的定义，请参阅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');;
            };
          });
       });

Jquery post方法和成功后重定向

3 个答案:

更新