在加载页面时使用ajax从php获取值

Question

我是PHP和Ajax的新手。下面是我的index.html代码，用于在搜索框中单击搜索找到的值时重定向到details.php：

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

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

});

details.php代码：

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

页面加载后没有从php获取响应但是，当我在index.html中使用相同的代码从同一个文件中获取数据时，它按照预期进行了调整。我需要在索引页面中单击时重定向到另一个页面。我还必须从不同的文件中获取一些其他详细信息。这是正确的方法吗？如果它是一个正确的方法，我错了。谢谢！

以下是我的getBioData.php代码：

<?php
    //require('utility/database.php');
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "db";

//Connect to Database
$conn = new mysqli($servername, $username, $password, $dbname);
    $id=$_GET['id'];
    $return = array();
    $query="select * from biodata where 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>";

}

?>

搜索框代码：

$('#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'
            });