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'), ); ?> ~~~