Get the values from php using ajax when loading page

I am new to PHP and Ajax. Below is my index.html code for redirects to details.php when click on search found values in search box :

$(document).on('click', '.foundValue', function(){

                var id = $(this).attr('id');
                window.location.href = 'php/details.php?id='+id; 

});

details.php code:

$(document).ready(function(){
                   var id = '<?php echo($id);?>';
            $.ajax({
                url: 'php/getBiodata.php',
                type: 'post',
                data: 'id=' + id,
                success: function(response) {
                    $('#biodata').html(response);
                }
            });
          }); 

After page loads response not getting from php but, when i used same code in index.html to get the data from same file it was woring as per expectation. I need to redirect to another page when click in index page.I have to get some other details also from different files. Is this correct way to do this? If its a correct way to do, where i did mistake. Thanks!