如何在ajax jquery中使用数据序列化获取复选框的多值？答案

【问题标题】：How to get multi value of checkox with data serialize in ajax jquery?如何在ajax jquery中使用数据序列化获取复选框的多值？
【发布时间】：2022-02-13 11:31:27
【问题描述】：

嘿伙计们，当我选择多个复选框时，序列化没有将它们放入数组中，我遇到了问题这是结果

product-category=29&product-category=27

我希望它是这样的

产品类别=29,27

这是我的 php 代码：

  <form id="myform">
    <fieldset>
      <label>Categorys</label>
      <?php
                $cats = get_terms([
                    'taxonomy' => 'product_cat',
                    'hide_empty' => false,
                ]);
      ?>
        <?php foreach($cats as $cat) : ?>  

          <input type="checkbox" id="product-category-checkbox" name="product-category" value="<?php echo $cat->term_id; ?>">

        <?php endforeach; ?>
   
    </fieldset>
  </form>

这是js代码：

<script>
  (function($){

    $(document).ready(function(){

      
      $(document).on('submit', '#myform', function(e) {

        e.preventDefault();

        var data = $(this).serialize();

        console.log(data);
        var settings = {
            "url": "<?php echo WC_AJAX::get_endpoint( 'kia_search' ) ?>",
            "method": "POST",
            "data": data
          }
          $.ajax(settings).done(function (response) {
                        $('.products').html(response);
                    
                });

      });
    });
  })(jQuery);
</script>

【问题讨论】：

标签： javascript php html jquery ajax

【解决方案1】：

不要直接通过.serialize() 序列化数据，而应该使用.serializeArray() 将数据作为数组获取。您可以操作数组，然后使用$.param() 对其进行序列化。

所以删除下面的行，让它更有活力

var data = $(this).serialize();

像这样。这是为了确保即使以后添加更多的表单元素，也无需更改代码。

<script>
    (function($){
        $(document).ready(function(){
            $(document).on('submit', '#myform', function(e) {
                e.preventDefault();

                // get data
                var data = $(this).serializeArray();

                // get 'product-category` values from array and join them
                var categories = data.filter(obj => obj.name === 'product-category').map(obj => obj.value).join(',');

                // add the joined 'product-category' back to data
                if( categories.length > 0 ){
                    data = data.filter(obj => obj.name !== 'product-category')
                               .concat({name: 'product-category', value: categories});
                }

                // serialize data
                data = $.param(data);

                console.log(data);
                var settings = {
                    "url": "<?php echo WC_AJAX::get_endpoint( 'kia_search' ) ?>",
                    "method": "POST",
                    "data": data
                }
                $.ajax(settings).done(function (response) {
                    $('.products').html(response);
                });
            });
        });
    })(jQuery);
</script>

【讨论】：