Ajax 不适用于 jquery 验证插件答案

【问题标题】：Ajax not working with jquery validate pluginAjax 不适用于 jquery 验证插件
【发布时间】：2016-04-05 19:51:17
【问题描述】：

我的 ajax 成功/失败事件没有触发。我正在使用 jquery 验证，并且在其中我使用 ajax 进行表单提交。我的表单正在提交，但返回值（JSON 数据）未按照 AJAX 中的说明显示。

我尝试使用 alert() 但它也没有触发。

<script type="text/javascript">
$('document').ready(function()
{

    $("#alert-form").validate({
          ignore: '',
          messages: {
            select2Start: {
              required: "Please select your starting point.",

            }
          },

        //});
        submitHandler: function(form) {

                e.preventDefault;
                var btn = $('#publish');
                btn.button('loading');
                alert('valid form submission');

                $.ajax({
                    type: 'post',
                    url:$('form#alert-form').attr('action'),
                    cache: false,
                    dataType: 'json',
                    data: $('form#alert-form').serialize(),
                    beforeSend: function() { 
                        $("#validation-errors_alert").hide().empty(); 
                    },
                    success: function(data) {
                        if(data.success == false)
                            {
                                var arr = data.errors;
                                $.each(arr, function(index, value)
                                {
                                    if (value.length != 0)
                                    {
                                        $("#validation-errors_alert").append('<div class="alert alert-danger"><strong>'+ value +'</strong><div>');
                                    }
                                });
                                $("#validation-errors_alert").show();   
                                btn.button('reset');                            
                            }else{
                            //  alert("Job Alert Configured successfully.");
                                 $("#job_success_alert").append('<div class="alert alert-success"><strong>Alert Configured successfully.</strong><div>');
                            }
                    },
                    error: function(xhr, textStatus, thrownError) {
                    alert('Something went to wrong.Please Try again later...');
                        alert(thrownError);
                        btn.button('reset');

                    }
                });             
                return false;
        }
            });

        });

    </script>

【问题讨论】：

e.preventDefault 不起作用有两个原因：1) 没有变量 e，2) 要调用一个函数，你必须在它后面加上括号。您也不需要它，因为验证插件会自动执行此操作。
success: 函数不会在任何地方显示 JSON 数据。它只显示消息“警报配置成功”
您是否看到“有效表单提交”警报？
Javascript 控制台有错误吗？
请编辑您的 OP 以回答 Barmer 在上面的 cmets 中发布的问题。您的.ajax() 位于正确的位置，除了告诉您不需要e.preventDefault() 行之外，我们无能为力。换句话说，您必须检查您的控制台日志并解决此问题，因为我们无权访问您的服务器或您的服务器端代码。

标签： jquery ajax jquery-validate

【解决方案1】：

正如 Barmer 在他的第一条评论中指出的那样，这段代码有几个问题......

 submitHandler: function(form) {
     e.preventDefault;
     ....

变量e在这个submitHandler函数中不存在。
您未能在.preventDefault() 中包含括号。
在这种情况下您不需要.preventDefault()，因为插件已经阻止了默认提交。完全删除此行。

注意事项：

为了提高可读性，不要将 Allman 与 1TBS 样式的代码格式混为一谈……只要始终保持一致即可。此外，最好完全使用avoid using Allman in JavaScript。

【讨论】：