显示详情
Posted navyyouth
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了显示详情相关的知识,希望对你有一定的参考价值。
当页面内容显示不全时点击详情可以查看详细内容
首先引入js包和bootstrap包
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="../jquery-3.3.1.min.js"></script> <script src="../bootstrap.min.js"></script> <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> </head>
做样式用bootstrap
<body> <table class="table table-striped"> <caption>汽车信息表</caption> <thead> <tr> <th>汽车名称</th> <th>上市时间</th> <th>价格(万)</th> <th>操作</th> </tr> </thead> <tbody> <?php require_once "../DBDA.class.php"; $db = new DBDA(); $sql = "select * from car"; $arr = $db->query($sql); foreach($arr as $v){ echo "<tr> <td>{$v[1]}</td> <td>{$v[3]}</td> <td>{$v[7]}</td> <td><button type=\'button\' class=\'btn btn-primary btn-xs xq\' code=\'{$v[0]}\'>查看详情</button></td> </tr>"; } ?> </tbody> </table> <!-- 模态框(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">汽车详细信息</h4> </div> <div class="modal-body" id="neirong"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body>
js代码
<script type="text/javascript"> $(".xq").click(function(){ //取主键值 var code = $(this).attr("code"); //读数据 $.ajax({ url:"xiangqingchuli.php", data:{code:code}, type:"POST", dataType:"JSON", success: function(data){ //打开模态框 $(\'#myModal\').modal(\'show\'); //向模态框里面扔内容 var str = "<div>汽车代号:"+data[0].Code+"</div><div>汽车名称:"+data[0].Name+"</div><div>系列代号:"+data[0].Brand+"</div><div>上市时间:"+data[0].Time+"</div><div>汽车油耗:"+data[0].Oil+"</div><div>汽车功率:"+data[0].Powers+"</div><div>汽车排量:"+data[0].Exhaust+"</div><div>汽车价格:"+data[0].Price+"</div>";//取json里面索引为0的小json数据 $("#neirong").html(str); } }); }) </script>
处理页面
<?php require_once "../DBDA.class.php"; $db = new DBDA(); $code = $_POST["code"]; $sql = "select * from car where code=\'{$code}\'"; echo $db->jsonquery($sql);//返回JSON数据
DADA封装的方法(添加返回json的方法)
<?php class DBDA{ public $host="localhost"; //服务器地址 public $uid="root"; //用户名 public $pwd="123"; //密码 public $dbname="crud"; //数据库名称 /* 执行一条SQL语句的方法 @param sql 要执行的SQL语句 @param type SQL语句的类型,0代表查询 1代表增删改 @return 如果是查询语句返回二维数组,如果是增删改返回true或false */ public function query($sql,$type=0){ $db = new mysqli($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ return $result->fetch_all(); } } public function strquery($sql,$type=0){
$db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname);
$result = $db->query($sql);
if($type){
return $result;
}else{
$arr = $result->fetch_all();
$str = "";
foreach($arr as $v){
$str .= implode("^",$v)."|";
}
$str = substr($str,0,strlen($str)-1);
return $str;
}
} //返回json数据的方法 public function jsonquery($sql,$type=0){ $db = new MySQLi($this->host,$this->uid,$this->pwd,$this->dbname); $result = $db->query($sql); if($type){ return $result; }else{ $arr = $result->fetch_all(MYSQLI_ASSOC);//关联数组 return json_encode($arr);//转换json //json_decode()分解json } } }
以上是关于显示详情的主要内容,如果未能解决你的问题,请参考以下文章
Sphinx、reStructuredText 显示/隐藏代码片段