我正在使用php&MySQL，我有两个功能1.从数据库中抓取数据，2.显示HTML视图代码，其中包含使用$_GET变量查看单个产品详细信息的链接。一切都很完美。但我希望在不刷新页面的情况下加载产品详细信息。我知道Ajax有能力处理这项任务，但我对Ajax并不了解。如有任何协助，我们将不胜感激。
以下是我的代码示例：
//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 . '<a href="'. BASE_URL .'item/?id='. $productID .'&name='. str_replace(' ', '-', $product["name"]) .'"> product name</a>';
$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);
}
}
要按照问题评论中的建议使用AJAX，您可以在客户端使用以下示例代码：
$(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
}
})
});
在后端，您需要返回JSON，因此：
$products = get_products();
header('Content-Type: application/json; charset=utf-8');
echo json_encode($products);