当页面内容显示不全时点击详情可以查看详细内容
首先引入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
}
}
}
