如何在js中传递一个值

I have this NULL VALUE ON $_SESSION inside my compare.php Do you know how to fix this?

Thank you

The js function :

$(function() {
    $('input[type=checkbox]').change(function() {   
        var chkArray = [];   
        $('#container').html('');

        //put the selected checkboxes values in chkArray[]
        $('input[type=checkbox]:checked').each(function() {
            chkArray.push($(this).val());
        });


        //If chkArray is not empty show the <div> and create the list
        if(chkArray.length !== 0) {
            $('#container').show();           
            $.each(chkArray, function(i, val) { 
                $('<p>').text(chkArray[i]).appendTo('#container');
            });


            $('#rectButton').on('click', function (e) {     
             $.ajax({
                method: 'POST',
                url : "http://localhost/shop/ext/ajax/products_compare/compare.php",
                data : {product_id:chkArray},
/*
                success : function(resp){
                    alert("Product is added to be compared" );
                }
*/                
             });
           });

        }else{
            $('#container').hide();   
            $('#container').html('');
        }
    });    
})             
</script>

<button id="rectButton" class="btn"><a href="compare.php">Compare</a></button> 

my ajax file

 $product_id = $_POST['product_id'];

 if(!is_array($_SESSION['ids'])) {
   $_SESSION['ids'] = [];
 } else {
   array_push($_SESSION['ids'], $product_id);
 }

the ajax file result is :

product_id[]: 12
product_id[]: 10
product_id[]: 9

my file compare.php on the ajax result.

var_dump($_SESSION] ===> NULL
var_dump($_SESSION]N['ids']; ===> NULL


result I see:
array(1) { ["ids"]=> array(5) { [0]=> array(1) { [0]=> string(2) "10" } [1]=> array(2) { [0]=> string(2) "10" [1]=> string(1) "9" } [2]=> array(1) { [0]=> string(1) "9" } [3]=> array(2) { [0]=> string(2) "12" [1]=> string(1) "9" } [4]=> array(3) { [0]=> string(2) "12" [1]=> string(2) "11" [2]=> string(1) "9" } } }

good result to have :

[4]=> array(3) { [0]=> string(2) "12" [1]=> string(2) "11" [2]=> string(1) "9" } 

Since $_POST['product_id'] is an array, you shouldn't push the entire array onto the session variable as a single item, that's why you're getting a 2-dimensional array. You should simply assign the new array to the session variable, since it contains all the items that the user has checked.

$_SESSION['ids'] = $_POST['product_id'];

You shouldn't bind the click handler inside the change handler. You should bind the two handlers independently, and they can both use a global chkArray variable.

$(function() {
  var chkArray = [];
  $('input[type=checkbox]').change(function() {
    $('#container').html('');

    //put the selected checkboxes values in chkArray[]
    chkArray = $('input[type=checkbox]:checked').map(function() {
      return this.value;
    }).get();

    //If chkArray is not empty show the <div> and create the list
    if (chkArray.length !== 0) {
      $('#container').show().html('');
      $.each(chkArray, function(i, val) {
        $('<p>').text(chkArray[i]).appendTo('#container');
      });
    } else {
      $('#container').hide().html('');
    }
  });

  $('#rectButton').on('click', function(e) {
    $.ajax({
      method: 'POST',
      url: "//localhost/shop/ext/ajax/products_compare/compare.php",
      data: {
        product_id: chkArray
      },
      /*
      success: function(resp) {
        alert("Product is added to be compared");
      }
      */
    });
  });

})

</div>