Javascript Ajax多次提交表单

我将此代码用于Ajax发送的数据。我正在使用summernote编辑器。我的问题是，当我通过缺少任何字段进行提交时，我的from会显示“required alert”，然后当我填写所有字段并按下submit按钮时，表单会发送两次Ajax请求。直到每次我错过必填字段时发生

  <script type="text/javascript">
    jQuery(document).ready(function (e) {
        jQuery('#btnSubmit').click(function(){ //btnSubmit is submit button id

            jQuery("#my_form").submit(function(event){
                event.preventDefault(); //prevent default action
                var post_url = jQuery(this).attr("action"); //get form action url
                var request_method = jQuery(this).attr("method"); //get form GET/POST method
                var form_data = new FormData(this); //Creates new FormData object
                jQuery.ajax({
                     url: "/demo/wp-admin/admin-ajax.php?action=theme_submit",  

                    type: request_method,
                    data : form_data,
                    contentType: false,
                    cache: false,
                    processData:false,
                    success:function(data){  
                    alert ('Data Successfully Inserted');
                    //location.reload();
                    //top.location.href="admin.php?page=data_list";
                    },

                })

            });
        })
    }); 
    </script>

jQuery（文档）.ready（函数（e）{
jQuery（“#btnSubmit”）。单击（函数（）{//btnSubmit是提交按钮id
jQuery（“我的表单”）.submit（函数（事件）{
event.preventDefault（）；//防止默认操作
var post_url=jQuery（this）.attr（“action”）；//获取表单操作url
var request_method=jQuery（this.attr（“method”）；//获取表单get/POST方法
var form_data=new FormData（this）；//创建新的FormData对象
jQuery.ajax({
url:“/demo/wp admin/admin ajax.php？action=theme\u submit”，
类型：请求\u方法，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
成功：函数（数据）{
警报（“数据已成功插入”）；
//location.reload（）；
//top.location.href=“admin.php？page=data\u list”；
},
})
});
})
}); 

您可以从单击中提取提交。编写一个提交表单的函数，并在单击

#btnSubmit

时调用它。以下是帮助您的代码：

jQuery（'#btnSubmit'）。在（'click'，函数（事件）{
event.preventDefault（）；//防止默认操作
submitForm（）；
})
函数submitForm（）{
var post_url=jQuery（“#我的表单”）.attr（“操作”）//获取表单操作url
var request_method=jQuery（#my_form”）.attr（“method”）//get form get/POST方法
var form=$（'form'）。get（0）；
var form_data=new FormData（form）//创建新的FormData对象
jQuery.ajax({
url:“/demo/wp admin/admin ajax.php？action=theme\u submit”，
类型：请求\u方法，
数据：表格数据，
contentType:false，
cache:false，
processData:false，
成功：功能（数据）{
警报（“数据已成功插入”）；
//location.reload（）；
//top.location.href=“admin.php？page=data\u list”；
},
})
}

尝试为按钮添加一个

event.preventDefault（）

。您不需要

jQuery（“#btnSubmit”）。单击（function（）{/code>和
jQuery（“#我的表单”）。提交（function（event）{/code>如果两者都有，它将提交两次。删除您的句子：
jQuery（'btnSubmit'）。单击（function（）{
。如果您的表单按钮有
type='submit'
，则您在
#myform
中的提交会执行单击操作。如果我第一次填写所有字段，则其提交表单一次。我使用此
jQuery（'#btnSubmit'）。单击（函数（）{
因为我使用的是summernote编辑器。错误显示：
TypeError:FormData.constructor的参数1不是对象。var form_data=new FormData（“#my#u form”）；//创建新FormData对象
我相信，我们需要将
新FormData（$（“#my#u form”）
更改为
新FormData（$（“#my#form”）
仍在显示
TypeError:FormData.constructor的参数1未实现接口HTMLFormElement.var form\u data=new FormData（$（“#my\u form”）；//创建新的FormData对象
似乎
FormData
需要HTML对象。在这种情况下，它应该是
var form=$（'form'）。get（0）
和
var form_data=new FormData（form）
现在已提交表单，但未显示任何必需的警报