jquery - Get the values from php using ajax when loading page -

i new php , ajax. below index.html code redirects 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 php but, when used same code in index.html data same file woring per expectation. need redirect page when click in index page.i have other details different files. correct way this? if correct way do, did mistake. thanks!

below getbiodata.php code:

<?php     //require('utility/database.php'); $servername = "localhost"; $username = "root"; $password = ""; $dbname = "db";  //connect database $conn = new mysqli($servername, $username, $password, $dbname);     $id=$_get['id'];     $return = array();     $query="select * biodata id = '$id'";      $result = $conn->query($query);     while($row = $result->fetch_assoc())     {             $firstname =$row['first_name'];             $lastname=$row['last_name'];             $fathername =$row['father_name'];               echo "<div class='row'>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>first name</div>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>: ".$firstname."</div>                  </div>";             echo "<div class='row'>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>last name</div>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>: ".$lastname."</div>                  </div>";             echo "<div class='row'>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>father name</div>                     <div class='col-lg-4 col-md-4 col-sm-4 col-xs-6'>: ".$fathername."</div>                  </div>";  }  ?> 

search box code:

$('#users').typeahead({                 name: 'user',                 template:['<div class="media br-bottom foundvalue" id="{{id}}">',                           '<a class="pull-left" href="#"><img class="media-object img-rounded" width="35" height="35" src="{{image_url}}"></a>',                           '<div class="media-body"><h4 class="media-heading">{{first_name}},{{last_name}}</h4>',                           '<p>{{place_birth}}<p></div></div>'                           ].join(''),                 engine: hogan,                 remote: 'search.php?query=%query'             });