form表單查詢信息詳情頁 · 學習AJAX

[TOC] >[success] # form表單查詢信息詳情頁 <br/> ~~~ 用'PHP'實現一個'表單查詢'的功能，在'index.html'頁面輸入內容提交后，跳轉到'info_detail.php'(詳情頁) ，然后詳情頁面根據'搜索條件'去'數據庫'中查數據，然后把數據包裝一下'返回給前端' ~~~ <br/> ![](https://img.kancloud.cn/56/0c/560c447be883deac92ecdf9a99102b46_1214x272.png) <br/> [查詢功能思維導圖.xmind下載](https://pan.baidu.com/s/1HbUHyWwz0kn0z9TOLei4vw) <br/> >[success] ## 前端代碼部分 <br/> index.html（搜索頁面） <br/> ~~~ <!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>  <h2>查詢信息界面</h2> <form action="./info_detail.php"> <input name="info" type="text" placeholder="請輸入你要查詢的信息"> <input type="submit"> </form> </body> </html> ~~~ <br/> >[success] ## 后端代碼部分 <br/> info_detail.php（詳情頁面） <br/> ~~~ <!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']; // 連接數據庫做查詢（這里是模擬的假數據） include './data_info_detail.php'; // 用前端的數據跟數據庫的數據做查詢匹配 $returnData = $infoAll[$frontEndInfo]; // 生成頁面返回給用戶 echo '<h2>'.$returnData['name'].'--<span>'.$returnData['type'].'</span>--<span>'.$returnData['size'].'</span></h2>' ?> </body> </html> ~~~ <br/> >[success] ## 數據庫數據 <br/> data_info_detail.php（模擬數據庫假數據文件） <br/> ~~~ <?php // 模擬數據庫數據 $infoAll = array( '蘋果電腦' => array('name' => '蘋果電腦', 'type' => '電子產品', 'size' => '128MB'), '聯想電腦' => array('name' => '聯想電腦', 'type' => '電子產品', 'size' => '256MB'), '華碩電腦' => array('name' => '華碩電腦', 'type' => '電子產品', 'size' => '512MB'), '筆記本電腦' => array('name' => '筆記本電腦', 'type' => '電子產品', 'size' => '1024MB'), ); ?> ~~~