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方法。 這將簡化您的代碼並使其更易於維護。

我要做的下一件事是修改內容以使用選中的選擇器 ，這將簡化獲取選中值列表的過程。 像這樣：

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

為了使其正常工作，您需要設置<input>標記的value屬性。 像這樣：

<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]和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（幾乎）是多余的，但是如果您要傳輸復雜的數據對象，它確實很出色。

編輯：更新的方法。 當選擇器返回多個元素時， .val()似乎不返回數組。 有關示例，請參見此小提琴 。 我在評論中使用了Arash建議的方法。