运用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="../fengzhuang/bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" /> //引入bootstrap的css文件 <script src="../fengzhuang/jquery-3.1.1.min.js"></script> //先引入jquery的js文件 <script src="../fengzhuang/bootstrap/js/bootstrap.min.js"></script> //再引入其它的js文件 <style type="text/css"> .xq{ margin-left:30px} </style> </head> <body> <p class="page-header"> <h1>显示数据 </h1> </p> <table class="table table-hover"> <thead> <tr> <th width="30%">代号</th> <th width="30%">名称</th> <th width="40%">操作</th> </tr> </thead> <tbody id="tb"> //用js向其中添加内容 </tbody> </table> <!-- 模态框（modal） --> <p class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="mymodallabel" aria-hidden="true"> <p class="modal-dialog"> <p class="modal-content"> <p class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="mymodallabel">详细信息</h4> </p> <p class="modal-body" id="nr"> </p> <p class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> </p> </p><!-- /.modal-content --> </p><!-- /.modal --> </p> </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
<?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);
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jquery+ajax判断输入的验证码是否通过
ajax跨域请求不到cookie
以上就是怎么用ajax实现数据删除与的详细内容。