複選框創建多個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，你應該很好。