How to display product details without page being refreshed - php

Question

I am developing a website using php & MySQL, i have two functions
1. Grab data from database,
2. display HTML view codes with a link to view individual product details using $_GET variable.
Everything works perfectly. But i want the product details to load without the page being refreshed. I understand Ajax is capable in handling the task but i am not knowledgeable in Ajax. Any assistance would be appreciated.
Below are my codes example:
//Main product view
function product_view($product) {
$output = "";
$output = $output . '<li class="col-sx-12 col-sm-3">';
$output = $output . '<div class="product-container">';
$output = $output . ' product name';
$output = $output . '----';
$output = $output . '----';
$output = $output . '----';
$output = $output . '</div>';
$output = $output . '</li>';
return $output;
}
//Main product display
function get_products() {
require(ROOT_PATH ."inc/db_connect.php");
$sql = "SELECT * FROM products WHERE status='Active'";
$query = mysqli_query($db_connect, $sql);
return $query;
}
//View page
$products = get_products();
if (!empty($products)) {
foreach ($products as $product) {
echo product_view($product);
}
}

Answer 1

To use AJAX as suggested in some comments of your question, you can use this sample code in your client side:
$(document).ready(function(){
$.ajax({
url: 'products.php',
method: 'GET'
}).then(function(data){
for(int i=0; i < data.length; i++){
$('body').append('<li class="col-sx-12 col-sm-3"><div class="product-container>...'+data[i].attribute+'</div></li>');
//append all information that you need
}
})
});
at your backend you need to return the JSON so:
$products = get_products();
header('Content-Type: application/json; charset=utf-8');
echo json_encode($products);