复选框创建多个AJAX请求

Question

在解决有关Xhr 200状态的问题(因此请求为"确定"(的路上，实际上不太好(DB中什么都没降落(，我VE发现了一些奇怪的东西。

在Chrome上，我击中F12，然后转到网络查看所有活动并随机完成表单。以此形式有一些复选框，所以我已经检查了所有内容，以查看是否正确传输了这些值。.

感到惊讶！

网络活动显示了6倍用于请求的PHP文件。在此PHP文件的第一个活动中，我能够看到此内容(1用于检查，0，未检查(：

windows:1
shutter:0
garage:0
portal:0
door:0
blind:0

在第二个呼叫中：

windows:1
shutter:1
garage:0
portal:0
door:0
blind:0

ect ...在第6次调用文件时获取此最终数据，只需单击：

windows:1
shutter:1
garage:1
portal:1
door:1
blind:1

最后一个转移是应该首先完成的，而不经过循环。

我想知道这里发生了什么。如果您想要一些代码，请随时提出。老实说，我以前从未见过。

编辑：这是完整的脚本，也许是$('：复选框：检查'(。每个(函数(i(应在Ajax请求之前关闭？

  $(function() {
    // Only if the form is submitted
    $('#estimate').on('click', function(e) {
      // To prevent the page to be reloaded on submit
      e.preventDefault();
      // Declare all variable
      var civil = $('input[name="gender"]:checked').val();
      var lastname = $('input[name="lastname"]').val();
      var firstname = $('input[name="firstname"]').val();
      var address = $('input[name="address"]').val();
      var zipcode = $('input[name="zipcode"]').val();
      var city = $('input[name="city"]').val();
      var tel = $('input[name="tel"]').val();
      var email = $('input[name="email"]').val();
      var situation = $('input[name="situation"]:checked').val();
      var place = $('input[name="place"]:checked').val();
      var message = $('#message').val();
      var selectedProject = [];
      // Set 0 to get a false boolean
      var windows = 0;
      var shutter = 0;
      var garage = 0;
      var portal = 0;
      var door = 0;
      var blind = 0;
      // At least one checkbox need to be checked
      if ( $('div.checkbox-group :checkbox:checked').length > 0 ) {
        // If the last message was displayed for an error
        $('.select').fadeOut('slow')
        // Get the value of the checked box
        $(':checkbox:checked').each(function(i) {
          selectedProject[i] = $(this).val();
          // Set 1 to get a true boolean for the checked box
          if ( selectedProject[i] == 'windows') {
            windows = 1
          }
          if ( selectedProject[i] == 'shutter') {
            shutter = 1
          }
          if ( selectedProject[i] == 'garage') {
            garage = 1
          }
          if ( selectedProject[i] == 'portal') {
            portal = 1
          }
          if ( selectedProject[i] == 'door') {
            door = 1
          }
          if ( selectedProject[i] == 'blind') {
            blind = 1
          }
          // Declare the data for the AJAX request
          data = {
            civil : civil,
            lastname : lastname,
            firstname : firstname,
            address : address,
            zipcode : zipcode,
            city : city,
            tel : tel,
            email : email,
            situation : situation,
            place : place,
            windows : windows,
            shutter : shutter,
            garage : garage,
            portal : portal,
            door : door,
            blind : blind,
            message : message,
          }
          // Beginning of the AJAX request
          $.ajax({
            url : "transfert/db_transfert.php",
            method :"POST",
            data : data,
            success : function(res){
              if ( res == "done" ) {
                $("#res").hide().html("<p style="color:green;">Votre demande à était envoyée</p>").fadeIn('slow');
              } else if ( res == "missing" ) {
                $("#res").hide().html("<p style="color:red;">Il manque des renseignements</p>").fadeIn('slow');
              } else {
                $("#res").hide().html("<p style="color:red;">Une erreur s'est produite, recommencez ultérieurement</p>").fadeIn('slow');
              }
            }
          })
        });
      } else {
        $('.select').hide().html('<p style="color:red;">Veuillez choisir votre projet avant de continuer.</p>').fadeIn('slow');
      }
    })
  })

Answer 1

您可以在循环的一边执行Ajax请求。但是我认为您根本不需要循环。只需设置与复选框相关的变量，类似于您之前设置其他变量的方式：

var windows = $(":checkbox[value=windows]:checked").length;
var shutter = $(":checkbox[value=shutter]:checked").length;
...

您可以做的另一种方法是在循环之前创建data对象，然后从复选框进行更新。

  data = {
    civil : civil,
    lastname : lastname,
    firstname : firstname,
    address : address,
    zipcode : zipcode,
    city : city,
    tel : tel,
    email : email,
    situation : situation,
    place : place,
    windows : 0,
    shutter : 0,
    garage : 0,
    portal : 0,
    door : 0,
    blind : 0,
    message : message,
  }

$(":checkbox:checked").each(function() {
    data[this.value] = 1;
});

Answer 2

也许$('：'：复选框：检查'(。每个(函数(i(应在Ajax请求之前关闭？

那绝对是问题。它为每个复选框启动了单独的AJAX请求。只需在Ajax之前关闭.each()，您应该很好。