复选框创建多个AJAX请求

Question

在我解决xhr 200状态问题的方法中（所以请求是“ok”）谁实际上不是很好（db中没有任何内容），我发现了有点奇怪。

在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 

等...为了得到这个最终的数据时，该文件要求的第6次，只用点击：

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

这最后transfert是一个谁应该在第一时间完成，而无需通过循环下去。

我想知道这里发生了什么。如果你想要一些代码，请随时询问。说实话，我从来没有见过这个。

编辑： 下面是完整的剧本，也许$（ '：复选框：检查'），每个（函数（我）应该在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

也许？ $（'：checkbox：checked'）。each（function（i）should be closed before the AJAX request？

这绝对是问题所在，它会为每个复选框启动一个单独的AJAX请求。 .each()之前的AJAX，你应该很好。