列表渲染展示以及跳转详情 · 学习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'), ); ?> ~~~