这里发生的事情是当我第一次点击按钮时它不起作用，当我点击第二次然后它发送ajax请求，如果再次运行它然后它将发送最后一次请求发送的* 2请求。
这是我的代码
readonly=FalseAJAX代码
<?php
$this->load->view("header.php");
$this->load->view("sidebar.php");
?>
<style type="text/css">
.form-group .error{font-size: 12px;color: red;}
</style>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
User Management
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
<li><a href="#">User Management</a></li>
<li>Add User</li>
</ol>
</section>
<section class="content">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="callout callout-success" style="display: none;" id="cm_main_success">
<h4>Success!</h4>
<p id="cm_main_msg"></p>
</div>
<div class="callout callout-danger" style="display: none;" id="cm_main_fail">
<h4>Oh snap!</h4>
<p id="cm_main_fmsg"></p>
</div>
</div>
<div class="col-md-12">
<div class="box box-primary">
<div class="box-header with-border">
<h3 class="box-title">Add User</h3>
</div>
<form role="form" id="add_user" name="add_user" method="post" >
<div class="row">
<div class="box-body col-md-12">
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputFirstName">First Name</label>
<input class="form-control" id="first_name" name="first_name" placeholder="Enter First Name" type="text">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Email address</label>
<input class="form-control" id="email_address" name="email_address" placeholder="Enter Email Address" type="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Contact</label>
<input class="form-control" id="contact" name="contact" placeholder="Enter Contact Number" type="text">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputLastName">Last Name</label>
<input class="form-control" id="last_name" name="last_name" placeholder="Enter Last Name" type="text">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="password" name="password" placeholder="Enter Password" type="password">
</div>
<div class="form-group">
<label for="exampleInputFile">Profile picture</label>
<input id="profile_pic" name="profile_pic" type="file">
</div>
</div>
</div>
</div>
<div class="box-footer" style="text-align: center;">
<div id="loading"><img src="<?php echo base_url();?>assets/admin/images/hex-loader2.gif" style="display: none;"></div>
<button type="submit" class="btn btn-primary" id="btn_add_user">Add User</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
<?php
$this->load->view("footer.php");
?>
我已经尝试了与此主题相关的堆栈溢出提供的大部分ajax答案。 请任何能帮助我解决这个问题的人
答案 0 :(得分：4)
问题是因为您每次验证成功都是binding。您只需使用submitHandler作为
submitHandler: function (form) { //This is the form element you are already getting. You don't need to get the form again
var fdata=new FormData(form);
$.ajax({
//do further work
答案 1 :(得分：1)
成功验证后问题是$('#add_user').on('submit', function(e) {，这告诉表单必须再次提交，在提交处理程序刚处理完表单之后再没有提交函数。
$(document).ready(function(){
$("#add_user").validate({
rules: {
first_name: {
required: true,
lettersonly: true
},
last_name:{
required: true,
lettersonly: true
},
email_address:{
required: true,
email: true
},
password:{
required: true
},
contact:{
required: true,
digits: true
},
profile_pic:{
extension: "jpg|png|jpeg"
}
},
messages:{
first_name: {required:"First Name cannot be empty",lettersonly: "Enter valid first name"},
last_name: {required:"Last Name cannot be empty",lettersonly: "Enter valid last name"},
email_address:{required:"Email Address cannot be empty",email:"Enter valid email address"},
password:"Password cannot empty",
contact:{required: "Contact cannot be empty",digits:"Enter valid contact number"},
profile_pic:"Please select valid file .jpg, .png, .jpeg are allowed"
},
submitHandler: submitForm
});
function submitForm(){
var form=document.getElementById('add_user');
var fdata=new FormData(form);
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>Admin/add_members',
data: fdata,
processData: false,
contentType: false,
beforeSend: function () {
$('#loading').show();
$("#btn_add_user").hide();
$('#cm_main_success').hide();
$('#cm_main_fail').hide();
},
success: function(data){
if(data == 1)
{
$('#cm_main_success').show();
$('#cm_main_msg').html("User added successfully");
$('#cm_main_success').fadeOut(6000);
setTimeout(function(){ window.location.href = '<?php echo base_url();?>Admin/view_members'; }, 3000);
}
else if(data == 2)
{
$('#cm_main_fail').show();
$('#cm_main_fmsg').html("Email address already exist");
$('#cm_main_fail').fadeOut(6000);
me.data('requestRunning', false);
}
else
{
$('#cm_main_fail').show();
$('#cm_main_fmsg').html("Something Went Wrong!");
$('#cm_main_fail').fadeOut(6000);
}
},
complete: function () {
$('#loading').hide();
$("#btn_add_user").show();
}
});
return false;
}
});
答案 2 :(得分：1)
这很好用并经过测试。
$(document).ready(function(){
$("#add_user").validate({
rules: {
first_name: {
required: true,
lettersonly: true
},
last_name:{
required: true,
lettersonly: true
},
email_address:{
required: true,
email: true
},
password:{
required: true
},
contact:{
required: true,
digits: true
},
profile_pic:{
extension: "jpg|png|jpeg"
}
},
messages:{
first_name: {required:"First Name cannot be empty",lettersonly: "Enter valid first name"},
last_name: {required:"Last Name cannot be empty",lettersonly: "Enter valid last name"},
email_address:{required:"Email Address cannot be empty",email:"Enter valid email address"},
password:"Password cannot empty",
contact:{required: "Contact cannot be empty",digits:"Enter valid contact number"},
profile_pic:"Please select valid file .jpg, .png, .jpeg are allowed"
},
submitHandler: function (form) {
var form=document.getElementById('add_user');
var fdata=new FormData(form);
$.ajax({
type: "POST",
url: '<?php echo base_url(); ?>Admin/add_members',
data: fdata,
processData: false,
contentType: false,
beforeSend: function () {
$('#loading').show();
$("#btn_add_user").hide();
$('#cm_main_success').hide();
$('#cm_main_fail').hide();
},
success: function(data){
if(data == 1)
{
$('#cm_main_success').show();
$('#cm_main_msg').html("User added successfully");
$('#cm_main_success').fadeOut(6000);
setTimeout(function(){ window.location.href = '<?php echo base_url();?>Admin/view_members'; }, 3000);
}
else if(data == 2)
{
$('#cm_main_fail').show();
$('#cm_main_fmsg').html("Email address already exist");
$('#cm_main_fail').fadeOut(6000);
me.data('requestRunning', false);
}
else
{
$('#cm_main_fail').show();
$('#cm_main_fmsg').html("Something Went Wrong!");
$('#cm_main_fail').fadeOut(6000);
}
},
complete: function () {
$('#loading').hide();
$("#btn_add_user").show();
}
});
}
});
});
答案 3 :(得分：-1)
我认为这是事件冒泡的情况。具有提交类型的按钮将触发ajax调用并将表单提交到指定的URL。
将e.preventDefault()添加到表单提交功能，它应该只发送一次表单