Php 复选框创建多个AJAX请求

在我解决一个关于xhr 200状态（因此请求是“ok”）的问题的过程中，我发现了一些奇怪的事情，事实上谁不是很好（db中没有任何内容）

在chrome上，我点击F12，然后进入网络查看所有活动并随机填写表格。在这个表单中有一些复选框，所以我将它们全部选中，以查看值是否正确传输。。还有惊喜

网络活动显示了6倍于用于请求的相同php文件。在这个php文件的第一个活动中，我看到了这一点（1表示选中，0表示未选中）：

在第二次通话中：

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

等等。。。要在第六次调用文件时获取此最终数据，只需单击一次：

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

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

我不知道这里发生了什么事。如果您想要一些代码，请随意询问。老实说，我以前从未见过这种情况

编辑： 这是完整的脚本，可能是$（'：checkbox:checked'）。每个（函数（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');
      }

    })

  })

$（函数（）{
//只有在提交表格的情况下
$（“#估计”）。在（'click'，函数（e）上{
//防止在提交时重新加载页面
e、 预防默认值（）；
//声明所有变量
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=[]；
//设置0以获取假布尔值
var窗口=0；
var=0；
var=0；
var=0；
var门=0；
var盲=0；
//至少需要选中一个复选框
如果（$（'div.checkbox-group:checkbox:checked'）。长度>0）{
//如果显示最后一条错误消息
$（'.select'）.fadeOut（'slow'））
//获取复选框的值
$（'：复选框：选中'）。每个（函数（i）{
selectedProject[i]=$（this.val（）；
//设置1以获取复选框的真布尔值
如果（selectedProject[i]=“windows”）{
windows=1
}
如果（selectedProject[i]=“快门”）{
快门=1
}
如果（selectedProject[i]=“garage”）{
车库=1
}
如果（selectedProject[i]=“门户”）{
入口=1
}
如果（selectedProject[i]=“门”）{
门=1
}
if（selectedProject[i]=“blind”）{
盲=1
}
//为AJAX请求声明数据
数据={
民事:民事,，
lastname:lastname，
名字：名字，
地址:地址:，
zipcode:zipcode，
城市:城市,，
电话:电话:，
电邮:电邮,，
情境：情境，
地点:地点,，
窗口：窗口，
快门：快门，
车库：车库，
门户：门户，
门：门，
瞎子：瞎子，
讯息:讯息,，
}
//AJAX请求的开始
$.ajax({
url:“transfert/db_transfert.php”，
方法：“张贴”，
数据：数据，
成功：功能（res）{
如果（res==“完成”）{
$（“#res”）.hide（）.html（“
Votre demandeétait特使e
”）.fadeIn（'slow'）；
}else if（res==“缺失”）{
$（“#res”）.hide（）.html（“
Il manque des renseignements
”）.fadeIn（'slow'）；
}否则{
$（“#res”）.hide（）.html（“
Une erreur s'est produite，recomencez ulteérieurement
”）.fadeIn（'slow'）；
}
}
})
});
}否则{
$（'.select'）.hide（）.html（'
Veuillez choisir votre projet avant de continuer.
'））.fadeIn（'slow'）；
}
})
})

可能是$（'：checkbox:checked'）。每个（函数（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');
      }

    })

  })

---

这就是问题所在。它会为每个复选框启动一个单独的AJAX请求。只需关闭

.each（）

在使用AJAX之前，您应该做得很好。

您可以在循环之外执行AJAX请求。但我认为您根本不需要循环。只需设置与复选框相关的变量，就像之前设置其他变量一样：

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

另一种方法是在循环之前创建

数据

对象，然后从复选框中更新它

  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;
});

---

然后，您最好向我们展示与AJAX调用相关的javascript。如果我理解正确，代码中有些东西正在运行，我猜这听起来像是一个典型的多重绑定问题。使用脚本编辑，并说明了为什么会发生这种情况。这是第1个方法的要点，非常有用，并且实现了布尔值的技巧r每个复选框，而不是更新循环中的值。太棒了！修复了循环错误，顺便说一下！但是我将使用Barmar建议来获得更短的代码