javascript - Ajax 调用 php 脚本从多个复选框表单发送值

Question

我有一个带有大量复选框的表单。复选框分为几类，每类大约有 20 个复选框。类别包括尺寸、颜色等...但为了简化这一点，我仅解释具有 20 个复选框的尺寸类别，如下所示:

<form>
  <input type="checkbox" name="size[]"><label class="checkboxvalue">size 1</label>
  <input type="checkbox" name="size[]"><label class="checkboxvalue">size 2</label>
  <input type="checkbox" name="size[]"><label class="checkboxvalue">size 3</label>
  .
  .
  .
  <input type="checkbox" name="size[]"><label class="checkboxvalue">size 20</label>
</form>

我想 Ajax 调用 php 脚本并从数据库中检索相关记录，其中包含已检查的尺寸(当然还有所选的颜色、图案、设计...)。
我想知道是否有机会使用数组发送这么多数据，因为我有 10 个类别和每个类别 20 个复选框，导致 200 个参数，我认为这太多了。
如果我可以使用一个数组，它可能类似于传递 10 个数组。
经过几个小时的谷歌搜索后，我发现我应该有这样的复选框 <input type="checkbox" name="size[]">而不是这个<input type="checkbox" name="size1"> ，但我陷入了 JavaScript 部分。我用的是这个:

<script>
  $("input[name='size[]']").on( "click", function getValues() {
    $("input[name='size[]']").map(function() {
    return this.checked;
    }).get().join(",");
  });
</script>

这会返回复选框的逗号分隔值列表，例如 true,false,true,true,...,false,false根据大小类别复选框，但我不知道如何将它们作为数组发送到 php 脚本。我应该使用 JSON 格式吗？我如何在 php 脚本上访问它们？这是我的ajax:

function ShowResult(size,color,pattern,design,application,producer) {
  var xmlhttp;
  if (window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();
  }else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
      document.getElementById("main").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","filter.php?size[]="+size+"&color[]="+color+"&pattern[]="+pattern+"&design[]="+design+"&application[]="+application+"&producer[]="+producer,true);
  xmlhttp.send();
}

作为我的问题的补充部分，最大限度地减少向脚本传输的数据的最佳方法是什么？发送 0 or 1 是个好习惯吗？而不是false or true用于数组中复选框的选中状态？也许，最好只发送那些带有检查值的大小的索引。有没有更好的方法来实现这一点。提前致谢。

Answer 1

您选择的方法在某种程度上取决于您如何评估“最佳”。在这种情况下，我会使用三个主要标准:

1. 低带宽
2. 清晰的代码(语义正确且易于理解)
3. 简单的代码(易于编写、调试和维护的代码)

鉴于您的第二个代码示例，很明显您正在使用 jQuery。我要做的第一件事就是用对 $.get() 的调用替换您的 AJAX 方法。或 $.ajax() 。这将简化您的代码并使其更易于维护。

我要做的下一件事是修改内容以使用 checked selector ，这将简化获取检查值列表的过程。像这样的事情:

var checkedValue = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get();

为了使其工作，您需要设置 value您的属性(property)<input>标签。像这样的事情:

<form>
  <input type="checkbox" name="size[]" value="1"><label class="checkboxvalue">size 1</label>
  <input type="checkbox" name="size[]" value="2"><label class="checkboxvalue">size 2</label>
  <input type="checkbox" name="size[]" value="3"><label class="checkboxvalue">size 3</label>
  .
  .
  .
  <input type="checkbox" name="size[]" value="20"><label class="checkboxvalue">size 20</label>
</form>

这将生成一个包含选中框值的数组。例如，如果检查尺寸 1、5、7 和 20，您将得到 [1,5,7,20] .

接下来，要将其发送到 PHP，您基本上有两个选择:CSV 或 JSON。由于您正在使用的数据非常简单，因此没有太多理由使用其中之一，因此我将展示如何同时执行这两种操作!

CSV JS:

var sizeList = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get().join(",");

$.get("filter.php", {
        'sizeList': sizeList // I'm averse to any non-alphanumeric characters in URLs; you could use size[] if you prefer
    }, function(responseData) {
        $("#main").html(responseData);
    }
);

CSV PHP:

if(isset($_REQUEST['sizeList'])) {
    $sizes = explode(",", $_REQUEST['sizeList']);
} else {
    // handle error
}

JSON JS:

var size = $("input[name='size[]']:checked").map(function() {
    return Number(this.value);
}).get();

var sizeList = JSON.stringify(sizes);

$.get("filter.php", {
        'sizeList': sizeList // I'm averse to any non-alphanumeric characters in URLs; you could use size[] if you prefer
    }, function(responseData) {
        $("#main").html(responseData);
    }
);

JSON PHP:

if(isset($_REQUEST['sizeList'])) {
    $sizes = json_decode($_REQUEST['sizeList']);
} else {
    // handle error
}

我个人的建议是使用 CSV，除非您预计数据格式会比简单的数字列表更复杂。 CSV 非常适合简单的表格数据，但不适用于更复杂的格式。同时，对于简单的数字列表来说，JSON(几乎)是大材小用，但如果您想传输复杂的数据对象，JSON 确实会大放异彩。

编辑:更新方法。看来.val()当选择器返回多个元素时，是否不返回数组。请参阅this fiddle举个例子。我使用了 Arash 在评论中建议的方法。