Question

我在/contact-us上创建了一个表单并且action="/contact-us"。现在，当我向它添加Ajax时，它正在发送请求三次，我找不到原因。

的Ajax：

define(['jquery', 'foundation.alert'], function($) {
  return {
    init: function() {
      $("#success-alert").hide();
      $("#error-alert").hide();
      $('button').click(function(e){
        $('input').map(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);
                  }
                });
              });
            });
          }
        });
      });
    }
  }
});

Answer 1

您正在循环浏览所有输入并在表单中的每个输入上申请提交。因此，如果提交3次，则必须有三个输入。每次单击该按钮，您将添加更多提交处理程序！整个设计都是错误的。

你不应该在click事件中附加提交处理程序，它应该在外面并且完成一次。在提交处理程序内部进行验证，以确保在进行Ajax调用之前它是有效的。

Answer 2

试试这个解决方案。

var wait = false;

全局范围的等待变量

if (!wait) {
    wait = true;
    $.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) {
            wait = false;
            form.trigger('reset'); // reset form
            $("#success-alert").show();
            $("#error-alert").hide();
            submit.html('Send'); // reset submit button text
        },
        error: function (e) {
            console.log(e)
        }
    });
}

Answer 3

在完成我的代码后，我意识到我一直在做的错误，并且意识到阅读代码比编写代码更重要。

这是我重写代码及其工作正常的方式，但我仍然不确定它是否是最好的方法。

define(['jquery', 'foundation.alert'], function($) {
return {
init: function() {
    $("#success-alert").hide();
    $("#error-alert").hide();

  $(function () {
    $('#contact_us').on('submit', function (e) {
      $.ajax({
        type: 'post',
        url: '/contact-us',
        data: $('#contact_us').serialize(),
        success: function () {
          $("#success-alert").show();
          $("#error-alert").hide();
        }

      });
      e.preventDefault();
    });
  });

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

    }
 }
});

注意：永远不要把代码写成负担。

表单请求三次：状态200 OK

3 个答案: