Passing values via an Ajax querystring

The problem was with my counter value. It was initially being set as a string so I converted it to an integer and everything worked perfectly.

Finished code:

Page data being sent from

$("iframe").mouseover(function(){
  <?php
    global $post;
    $id = $post->ID;
  ?>
  $.ajax({
    type: "POST",
    url: "<?php bloginfo('template_directory'); ?>/ajax.php",
    data: "pid=<?php echo $id; ?>",
    cache: false,
    success: function(html) {
      console.log(html);
    }
   });
 });

On the Ajax processing page:

<?php
  define( 'WP_USE_THEMES', false );
  require_once( '../../../wp-load.php' ); 
  $pid = $_POST['pid'];
  $counter_val = get_post_meta( $pid, 'counter', true );
  $counter_val = floatval($counter_val);
  $counter_val = $counter_val + 1;
  echo $counter_val;
  update_post_meta( $post_id = $pid, $key = 'counter', $value = $counter_val );
  echo "done";
?>