类型错误：e.preventDefault 不是一个函数。

Question

我对JavaScript和jQuery还很陌生。在这段代码中，我使用了两个jQuery插件：一个是jQuery表单验证器，另一个是jQuery表单ajaxSubmit。普通的Ajax提交可以正常工作，但现在我需要上传文件，所以我使用了ajaxSubmit。当我运行它时，在浏览器控制台上会出现“TypeError：e.preventDefault不是一个函数”的错误。

请不要将此标记为重复问题，因为其他类似主题的答案对我没有用。

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

        $("#addpost").validate({
            rules: {
                subject: "required",
                comment: "required"
            },
            messages: {
                subject: "Please enter a subject",
                comment: "Please enter some details",                   
            },
            submitHandler: function(e){
                e.preventDefault();
                $.ajaxSubmit({
                    url: '/addpost',
                    type: 'post',
                    dataType: 'html',
                    data : $( "#addpost" ).serialize(),
                    success : function(data) {
                        location.reload();
                    }
                });
            }
        });     

    }); 
</script>

我的问题的解决方案是将submit handler更改如下：

submitHandler: function(form){
    $(form).ajaxSubmit({
            url: '/addpost',
            type: 'post',
            dataType: 'html',
            data : $( "#addpost" ).serialize(),
            success : function(data) {
                location.reload();
            }
     });
    return false
}

希望这能帮到某个人。

- Arjun Ajith

---

阅读 submitHandler 的文档：http://jqueryvalidation.org/validate/ ，它会告诉你它接收什么参数。 - Evan Trimboli

Answer 1

我不确定您会在提交处理程序中使用e.preventDefault()。

移除该行并在您的ajax提交后添加return false;，这样可以防止表单被提交。

- mtrolle

---

谢谢您的回答。但现在出错了，错误在于ajaxSubmit "TypeError:$.ajaxSubmit不是一个函数"。我们可以在一个插件中使用另一个插件吗？这样做是否正确？ - Arjun Ajith

请检查您的网络选项卡，查看获取jQuery文件时是否出现错误。 - Imesh Chandrasiri

@DimalChandrasiri 我没有收到任何错误信息。问题实际上是语法错误。 - Arjun Ajith

Answer 2

你的e不是事件，而是表单元素。将代码更改如下：

submitHandler: function(form,e){ // place your element on second parameter
            e.preventDefault();
            $.ajaxSubmit({
                url: '/addpost',
                type: 'post',
                dataType: 'html',
                data : $( "#addpost" ).serialize(),
                success : function(data) {
                    location.reload();
                }
            });
        }

- wahmal

Answer 3

你在submitHandler中使用的e并不提供事件对象，而是提供了你正在验证的表单对象！这就导致了你遇到的错误。请阅读1文档，以便了解你正在处理哪些对象和回调函数。

[1 - 链接]

- Imesh Chandrasiri

Answer 4

例如在Laravel中，我使用的方式如下，并且它是有效的。 $(“＃register-form”）。validate（{

    submitHandler: function(form) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        var formData = new FormData(form);
        $.ajax({
            type:'POST',
            url:'{{route('registerapi')}}',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success:function(data) {
                if ($.isEmptyObject(data.error)) {
                    $(':input','#register-form')
                        .not(':button, :submit, :reset, :hidden')
                        .val('')
                        .prop('checked', false)
                        .prop('selected', false);

                    window.location.href = "{{route('/')}}";

                } else {
                    console.log(data.error);
                }
            }
        });
    }
});

- Ani