Jquery 带有Ajax的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代码[编辑后更新]

HTML

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

似乎您正在重复提交，因为您正在提交事件本身内触发提交事件

尝试下面的解决方案，发布在

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

它仍然会给出预期的404错误，因为操作url不在JSFIDLE服务器上，这导致它不会重置表单，但这只是因为它在JSFIDLE上运行。在服务器上，表单将正确重置，因为将触发成功事件

$("#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


    });


});

---

决定是否要使用此解决方案发送数据：

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

或

---

代码看起来不错。你也可以发布你的html吗？@VolkanUlukut添加并添加了完整的Ajax。。。请检查两个！！！你没有else语句的闭包。我现在添加了它，仍然是同一个问题。仍然是你的大括号和大括号没有正确闭包。你能详细说明一下从HTML表单加载数据是如何修复它的吗？或者你是如何做到的，以便其他不熟悉它的人可以使用你的解决方案？

$("#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


    });


});

<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(),
         (...)
      });
});