使用Ajax发送表单多时间

Question

HTML表单我创建了一个联系表，并使用Ajax添加一些事件中，但是当我提交表单，它说

XHR finished loading: "localhost/mysite/contact-us". 
XHR finished loading: "localhost/mysite/contact-us". 
XHR finished loading: "localhost/mysite/contact-us". 
XHR finished loading: "localhost/mysite/contact-us". 

我不知道它为什么这样做，但在这里我的Ajax代码[更新之后编辑]

$("#success-alert").hide(); 
    $("#error-alert").hide(); 
    $('button').click(function(){ 
    $('input').each(function() { 
    if(!$(this).val()){ 
     $("#error-alert").show(); 
     $("#success-alert").hide(); 
     return false; 
} 
else 
{ 
$('document').ready(function() { 
var form = $('#contact_us'); // contact form 
var submit = $('button'); // submit button 
var status = $('#form-status'); // alert div for show alert message 

// form submit event 
form.on('submit', function(e) { 
e.preventDefault(); // prevent default form submit 

$.ajax({ 
    url: '/contact-us', // form action url 
    type: 'POST', // form submit method get/post 
    dataType: 'html', // request type html/json/xml 
    data: form.serialize(), // serialize form data 
    beforeSend: function() { 
    submit.html('Sending....'); // change submit button text 
    }, 
    success: function(data) { 
    form.trigger('reset'); // reset form 
    $("#success-alert").show(); 
    $("#error-alert").hide(); 
    submit.html('Send'); // reset submit button text 

    }, 
    error: function(e) { 
    console.log(e) 
    } 

}); 
}); 
}); 
} 
}); 
}); 

HTML

<h3>Contact Us</h3> 
    <form method="POST" action="/contact-us"class="static-contact-us styled" data-abide id="contact_us"> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">First Name</label> 
     </div> 
     <div class="large-9 columns"> 
     <input type="text" name="first_name" required> 
     <small class="error">First name is required</small> 
     </div> 
    </div> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">Last Name</label> 
     </div> 
     <div class="large-9 columns"> 
     <input type="text" name="last_name" required> 
     <small class="error">Last name is required</small> 
     </div> 
    </div> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">Phone Number</label> 
     </div> 
     <div class="large-9 columns"> 
     <input type="text" name="phone" required> 
     <small class="error">Phone number is required</small> 
     </div> 
    </div> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">E-Mail</label> 
     </div> 
     <div class="large-9 columns"> 
     <input type="text" name="email" required> 
     <small class="error">E-Mail is required</small> 
     </div> 
    </div> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">Subject</label> 
     </div> 
     <div class="large-9 columns"> 
     <input type="text" name="subject"> 
     </div> 
    </div> 
    <div class="row input-row"> 
     <div class="large-3 columns"> 
     <label class="inline">Question</label> 
     </div> 
     <div class="large-9 columns"> 
     <textarea name="question"></textarea> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="large-3 columns">&nbsp;</div> 
     <div class="large-9 columns"> 
     <button type="submit">Send</button> 
     </div> 
    </div> 
    </form> 
    <div id="form-status"> 
    <div id="success-alert" data-alert class="alert-box success radius"> 
    Thanks for contacting us! 
</div> 
    <div id="error-alert" data-alert class="alert-box alert radius"> 
     An error occurred. Try again later. 
</div> 

    <div id="form-status"></div> 

注意：HTML对我来说似乎很好，但我现在也添加了完整的Ajax。这可能是由于条件导致的问题。

Answer 1

JSFiddle Working Solution

看来，您所提交多次，因为你是触发上提交事件本身内提交事件。

请尝试下面的解决方案，张贴在JSFiddle。

它从按钮事件中删除表单提交事件，只提交一次。

它仍然给出了预期的404错误（因为动作url不在jsfiddle服务器上），这导致它不重置表单，但那仅仅是因为它运行在jsFiddle上。在您的服务器上，由于成功事件将触发，表单将正确重置。

$("#success-alert").hide(); 
$("#error-alert").hide(); 


jQuery(document).ready(function() { 



$('button').click(function(btn,e) { 
    $('input').each(function() { 
     if (!$(this).val()) { 
      $("#error-alert").show(); 
      $("#success-alert").hide(); 
      return false; 
     } 
     else 
     { 

       var form = $('#contact_us'); // contact form 
       var submit = $('button'); // submit button 
       var status = $('#form-status'); // alert div for show alert message 


        $.ajax({ 
         url: '/contact-us', // form action url 
         type: 'POST', // form submit method get/post 
         dataType: 'html', // request type html/json/xml 
         data: form.serialize(), // serialize form data 
         beforeSend: function() { 
          submit.html('Sending....'); // change submit button text 
         }, 
         success: function(data) { 
          form.trigger('reset'); // reset form 
          $("#success-alert").show(); 
          $("#error-alert").hide(); 
          submit.html('Send'); // reset submit button text 

         }, 
         error: function(e) { 
          console.log(e) 
         } 

        }); 
    return false; 
     } 

    }); 
}); 

// form submit event 
$('form').on('submit', function(e) { 
    // form submit event 
        e.preventDefault(); // prevent default form submit 


    }); 


}); 

Answer 2

决定是否要与这个解决方案将数据发送：

<form method="POST" action="/contact-us"> 
    (...) 
    <button type="submit">Send</button> 
</form> 

或

<form id="form"> 
    (...) 
    <button type="submit">Send</button> 
</form> 

$("form").submit(function() { 
    $.ajax({ 
     url: '/contact-us', 
     type: 'POST', 
     data: form.serialize(), 
     beforeSend: function(), 
     (...) 
     }); 
});