运用bootstrap,jquery和ajax显示一些数据，附加删除功能并且点击能弹出模态框详情功能
主页面main.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link type="text/css" href="https://www.jb51.net/FENGZHUANG/bootstrap/css/bootstrap.min.css" /> //引入bootstrap的css文件 <script src="https://www.jb51.net/FENGZHUANG/jquery-3.1.1.min.js"></script> //先引入jquery的js文件 <script src="https://www.jb51.net/FENGZHUANG/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件 <style type="text/css"> .xq{ margin-left:30px} </style> </head> <body> <div> <h1>显示数据 </h1> </div> <table> <thead> <tr> <th>代号</th> <th>名称</th> <th>操作</th> </tr> </thead> <tbody> //用js向其中添加内容 </tbody> </table> <!-- 模态框（Modal） --> <div tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div> <div> <div> <button type="button" data-dismiss="modal" aria-hidden="true">×</button> <h4>详细信息</h4> </div> <div> </div> <div> <button type="button" data-dismiss="modal">关闭</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> <script type="text/javascript"> //加载数据 Load(); //加载数据的方法 function Load() { $.ajax({ url:"jiazai.php", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); //根据字符串中的|分解 for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); //根据字符串中的^分解 str = str+"<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td><button type='button' code='"+lie[0]+"'>删除</button><button type='button' code='"+lie[0]+"'>查看</button></td></tr>"; } $("#tb").html(str); //向tbody中输出内容 addshanchu(); addxiangqing(); } }); } //给删除按钮加事件的方法 function addshanchu() { //删除事件 $(".sc").click(function(){ var code = $(this).attr("code"); //获取删除按钮所在的数据的code $.ajax({ url:"shanchu.php", data:{code:code}, dataType:"TEXT", type:"POST", success: function(d){ if(d.trim()=="OK") { alert("删除成功"); Load(); //删除完需要加载数据 } else { alert("删除失败"); } } }); }) } //给查看详情加事件的方法 function addxiangqing() { $(".xq").click(function(){ //显示模态框 $('#myModal').modal('show'); //在模态框里面显示内容 var code = $(this).attr("code"); //获取哪一条数据 $.ajax({ url:"xiangqing.php", data:{code:code}, dataType:"TEXT", type:"POST", success:function(data){ var lie = data.split("^"); var str = "<div>民族代号："+lie[0]+"</div><div>民族名称："+lie[1]+"</div>"; $("#nr").html(str); } }); }) } </script> </html>
加载数据的页面jiazai.php
<?php include("../FENGZHUANG/DBDA.class.php"); $db = new DBDA(); $sql = "select * from nation order by code ASC"; $arr = $db->Query($sql); // 下面实现的字符串是类似这样的n001^汉族|n002^回族|n003^苗族 $str = "";返回主页面的数据是TEXT型，得转换一下 foreach($arr as $v) { $str = $str.implode("^",$v)."|"; //拼接字符串 } $str = substr($str,0,strlen($str)-1); //去掉末尾的|字符。 echo $str;
删除处理页面shanchu.php
<?php include("../FENGZHUANG/DBDA.class.php"); $db = new DBDA(); $code = $_POST["code"]; $sql = "delete from nation where code='{$code}'"; if($db->Query($sql,0)) { echo "OK"; } else { echo "NO"; }
查看详情页面xiangqing.php
<?php $code = $_POST["code"]; include("../fengzhuang/DBDA.class.php"); $db = new DBDA(); $sql = "select * from nation where code='{$code}'"; echo $db->StrQuery($sql);