javascript - Ajax 在表单提交上发送多个请求

Question

这里发生的事情是当我第一次点击按钮时它不起作用，当我点击第二次然后它发送 ajax 请求如果再次运行它然后它将发送上次发送请求的 *2 请求。

这是我的代码

 <?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 代码

    $(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) {
     $('#add_user').on('submit', function(e) { 
       e.preventDefault();  
       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();

        }

      });

    });
    }

 }); 

   });

我已经尝试了与此主题相关的 stack-overflow 上提供的大部分 ajax 答案。请任何可以帮助我解决这个问题的人

Answer 1

问题是因为您每次都在绑定(bind) 验证成功。您只需将 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