列表渲染展示以及跳轉詳情 · 學習AJAX

[TOC] >[success] # 列表展示以及跳轉詳情 ~~~ 需求：用'PHP'渲染一個列表，并且點擊列表某一項'跳轉到詳情頁'，跳轉頁面用'a標簽'的'href'動態的拼接了'參數'，這樣一來到詳情頁面也就取到了'選中那項的參數' ~~~ >[success] ## 列表頁 list.php ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表頁面</title> </head> <body> <ul> <?php // 從數據庫獲取列表數據 include './list_data.php'; // 渲染列表 for($i=0;$i<count($infoAll);$i++){ echo '<li><a href="'.'./detail.php?info='.$infoAll[$i]['name'].'">'; echo '<h4>名稱'.$infoAll[$i]['name'].'：類型：'.$infoAll[$i]['type'].'大小：'.$infoAll[$i]['size'].'</h4>'; echo '</a></li>'; } ?> </ul> </body> </html> ~~~ >[success] ## 詳情頁 detail.php ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>詳情頁面</title> </head> <body> <?php // 設置頁面編碼格式 header('content-type:text/html;charset=utf-8'); // 獲取前端form表單提交過來的數據 $frontEndInfo = $_GET['info']; echo $frontEndInfo; // 連接數據庫做查詢（這里是模擬的假數據） include './data_info_detail.php'; // 用前端的數據跟數據庫的數據做查詢匹配 $returnData = $infoAll[$frontEndInfo]; // 生成頁面返回給用戶 echo '<h2>'.$returnData['name'].'--'.$returnData['type'].'--'.$returnData['size'].'</h2>' ?> <a href="./list.php">返回列表頁</a> </body> </html> ~~~ >[success] ## 數據庫 list_data.php（模擬全部列表數據） ~~~ <?php // 模擬數據庫數據 $infoAll = array( array('name' => '蘋果電腦', 'type' => '電子產品', 'size' => '128MB'), array('name' => '聯想電腦', 'type' => '電子產品', 'size' => '256MB'), array('name' => '華碩電腦', 'type' => '電子產品', 'size' => '512MB'), array('name' => '筆記本電腦', 'type' => '電子產品', 'size' => '1024MB'), ); ?> ~~~ data_info_detail.php（模擬詳情頁面數據） ~~~ <?php // 模擬數據庫數據 $infoAll = array( '蘋果電腦' => array('name' => '蘋果電腦', 'type' => '電子產品', 'size' => '128MB'), '聯想電腦' => array('name' => '聯想電腦', 'type' => '電子產品', 'size' => '256MB'), '華碩電腦' => array('name' => '華碩電腦', 'type' => '電子產品', 'size' => '512MB'), '筆記本電腦' => array('name' => '筆記本電腦', 'type' => '電子產品', 'size' => '1024MB'), ); ?> ~~~