Question

在我解决关于xhr 200状态的问题的路上（所以请求是“ok”），实际上并不是那么好（数据库中没有任何内容），我发现了一些奇怪的东西。

在Chrome上，我点击F12，然后进入网络查看所有活动并随机填写表格。在这种形式有一些复选框，所以我已经检查了所有，以查看值是否正确转移..并且惊喜！

网络活动显示了用于请求的相同php文件的6倍。在这个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

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

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

编辑： 这是完整的脚本，也许是$（'：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');
      }

    })

  })

Answer 1

也许$（'：checkbox：checked'）。每个（函数（i）应该在AJAX请求之前关闭？

这绝对是个问题。它为每个复选框启动一个单独的AJAX请求。只需在AJAX之前关闭.each()即可，你应该做得很好。

Answer 2

你可以在循环中执行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;
});

复选框创建多个AJAX请求

2 个答案: