How to send php variable through Ajax only if it is not empty

Question

So i have 4 php variables named $description,$hscode,$from,$to I wants to send these variables through a AJAX request.My incomplete attempt is like this:

function searchFilter(page_num) {
  page_num = page_num?page_num:0;

    $.ajax({
        type: 'POST',
        url: 'getData.php',
       data: { page : +page_num, "desc" : "<?php  print $description ?>","hscode" : "<?php  print $hscode ?>","from" : "<?php  print $from ?>","to" : "<?php $to ?>" },

        beforeSend: function () {
            $('.container-fluid').waitMe({
                   effect : 'stretch',
                   bg : 'rgba(255,255,255,0.7)'
                });
             },
        success: function (html) {
            $('#posts_content').html(html);
            $('.container-fluid').waitMe("hide");
        }
    });
}

The problem is, PHP variables are dynamic means they are not always set sometime only $description is set, sometime only $hscode is set ,sometime $description and $hscode only set,There are 6 combination of this type.Please help in this situation how can i send this request.

POSSIBLE Answer:

code is working fine but i am confused is it a right way to do it,Please correct me if i am wrong,my working code is :

function searchFilter(page_num) {
  page_num = page_num?page_num:0;

    $.ajax({
        type: 'POST',
        url: 'getData.php',
        data :  { page : +page_num, 
                  <?php if(isset($description)){ echo '"desc"'.' : '. "'$description'" . ',';} ?>
                  <?php if(isset($hscode)){ echo '"hscode"'.' : '. "'$hscode'" . ',';} ?>
                  <?php if(isset($from)){ echo '"from"'.' : '. "'$from'" . ',';} ?>
                  <?php if(isset($to)){ echo '"to"'.' : '. "'$to'" . ',';} ?> },


        beforeSend: function () {
            $('.container-fluid').waitMe({
                   effect : 'stretch',
                   bg : 'rgba(255,255,255,0.7)'
                });
             },
        success: function (html) {
            $('#posts_content').html(html);
            $('.container-fluid').waitMe("hide");
        }
    });
}

Answer 1

First you can check your variables are set or not, if its set then on;y append those variables to ajax data. Try following code:

function searchFilter(page_num) {
    page_num = page_num?page_num:0;
    send_data = {};
    send_data.page = +page_num;
    <?php if (isset($description)): ?>
    send_data.desc = "<?php echo $description ?>";
    <?php endif; ?>
    <?php if (isset($hscode)): ?>
    send_data.hscode = "<?php echo $hscode ?>";
    <?php endif; ?>
    <?php if (isset($from)): ?>
    send_data.from = "<?php echo $from ?>";
    <?php endif; ?>
<?php if (isset($to)): ?>
send_data.to = "<?php echo $to ?>";
<?php endif; ?>

      $.ajax({
          type: 'POST',
          url: 'getData.php',
         data: send_data,

          beforeSend: function () {
              $('.container-fluid').waitMe({
                     effect : 'stretch',
                     bg : 'rgba(255,255,255,0.7)'
                  });
               },
          success: function (html) {
              $('#posts_content').html(html);
              $('.container-fluid').waitMe("hide");
          }
      });
}

Answer 2

For the sake of clarity, assemble your array in PHP, then use json_encode() to convert it to a JSON object:

<?php
$php_data = [desc => $description, /* initialize other fields */];
?>
function searchFilter(page_num) {
  var data = <?php= json_encode($php_data) ?>;  /* dump as JSON object */
  data.page_num = page_num?page_num:0;          /* assign page_num field */
  $.ajax({
      type: 'POST',
      url: 'getData.php',
      data: data,                               /* pass object */