提交不重定向答案

【问题标题】：Submit without redirection提交不重定向
【发布时间】：2026-01-04 18:40:07
【问题描述】：

我想提交一个不重定向/刷新页面但使用jquery.validate 的表单。我尝试做类似的事情

$("#myForm").validate({
    errorLabelContainer: "#errorContainer",
    wrapper: "div",
    submitHandler: function (form) {
        form.submit(function () {
            return false;
        });
        $('#form-container').fadeOut(function () {
            $('#afterSubmit').fadeIn()
        });
        return false;
    }
});

我尝试将form.submit 更改为

form.ajaxSubmit(function () { return false; });

或者

form.submit(function () {
    var options = {};
    $(this).ajaxSubmit(options);
    return false;
});

还有许多其他变体。

当我只是执行以下代码时，表单没有提交。

submitHandler: function (form) {
        return false;
}

我应该怎么做才能在验证后提交我的表单而不是被重定向？

【问题讨论】：

如果脚本中有任何错误，页面将符合表单的操作声明。使用浏览器调试器单步执行您的代码以查找可能的错误原因。
实际上调试器并没有在我的断点处停止。我真的不知道为什么。
检查控制台日志，因为您的页面上可能存在其他阻止脚本运行的错误。
控制台没有错误。

标签： javascript forms jquery-validate form-submit

【解决方案1】：

你应该这样做。请在此处找到工作示例http://jsfiddle.net/rQu9W/
并确保添加jquery.min.js、jquery.validate.js、jquery.form.js，就像在我的 jsFiddle 示例中一样

$(function(){
  $("#myForm").validate({

    submitHandler: function(form) {
      $(form).ajaxSubmit({
        clearForm: true,//To clear form after ajax submitting
        success: function(){alert('done');}
      });
      return false;
    },

    invalidHandler: function(form) {
      alert('error');
    }

  });  
});

【讨论】：

【解决方案2】：

这是我用来进行 ajax 调用的方法：

var sendData = "action=do_action";
sendData += "&value=" + $("input.value").val();

$.ajax({
    url: "post.php",//Page to send our data to
    global: false,
    type: "POST",
    data: sendData,
    dataType: "html",
    async:false,
    success: function(data){
        //We could return JSON and then just parse that, but I usually just return values like this

        //create jquery object from the response html
        var $response=$(data);

        var results = $response.filter('div.results').text();//Or .html() if we want to return HTML to show                     

        if (results == "true") {
            alert("it works");
        }else{
            var reason= $response.filter('div.reason').text();
            alert(reason);
        }
    }
});

PHP 看起来像：

<?php
    $action = $_POST['action'];

    if ($action == "do_action") {
        if (true) {
            echo "<div class='result'>true</div>";
        }else{
            echo "<div class='result'>false</div>";
            echo "<div class='reason'>Houston, we have a problem!</div>";
        }
    }
?>

【讨论】：

为什么有人反对这个？这行得通。我根据需要在几个网站上使用了这个的变体......
我用这个表单发送文件，它不使用 jquery.validate 插件。

【解决方案3】：

如果您需要在不重新加载页面的情况下提交表单，则必须使用 ajax 提交。是的，为此您需要将 form.submit 更改为 form.ajaxSubmit。但是除了验证插件之外，您还需要包含 jQuery Form Plugin。您可以在此处找到有关 jQuery 表单插件的 ajaxSubmit 功能的更多详细信息。 http://jquery.malsup.com/form/#api

【讨论】：

只添加这个插件，没有任何变化。更新问题。