1

我有一个带有大量复选框的表格。复选框分为类别，每个类别大约有 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[]">而不是 this <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数组中复选框的选中状态是一种好习惯吗？也许，最好只发送带有检查值的那些大小的索引。有没有更好的方法来实现这一点。提前致谢。

4

1 回答 1

1

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

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

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

接下来我要做的是修改一些东西以使用选中的选择器，这将简化获取选中值列表的过程。像这样的东西：

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

为了使它起作用，您需要设置标签的value属性。<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（几乎）是矫枉过正的，但如果你想传输复杂的数据对象，它确实会大放异彩。

编辑：更新的方法。It appears that .val()does not return an array when there are multiple elements returned by the selector. 有关示例，请参见此小提琴。我在评论中使用了 Arash 建议的方法。

于 2013-07-22T22:38:43.673 回答