How to Get JSON Data from PHP Script using jQuery Ajax?

<input type="text" id="user_id" />
<input type="button" id="getUser" value="Get Details"/>
<div class="user-content" style="display: none;">
<h4>User Details</h4>
<p>Name: <span id="userName"></span></p>
<p>Email: <span id="userEmail"></span></p>
<p>Phone: <span id="userPhone"></span></p>
<p>Register Date: <span id="userCreated"></span></p>
</div>

<script>
$(document).ready(function(){
$('#getUser').on('click',function(){
var user_id = $('#user_id').val();
$.ajax({
type:'POST',
url:'getData.php',
dataType: "json",
data:{user_id:user_id},
success:function(data){
if(data.status == 'ok'){
$('#userName').text(data.result.name);
$('#userEmail').text(data.result.email);
$('#userPhone').text(data.result.phone);
$('#userCreated').text(data.result.created);
$('.user-content').slideDown();
}else{
$('.user-content').slideUp();
alert("User not found...");
}
}
});
});
});
</script>

//get user data from the database
$query = $db->query("SELECT * FROM users WHERE id = {$_POST['user_id']}");

if($query->num_rows > 0){
$userData = $query->fetch_assoc();
$data['status'] = 'ok';
$data['result'] = $userData;
}else{
$data['status'] = 'err';
$data['result'] = '';
}

//returns data as JSON format
echo json_encode($data);