首页 > > 网络编程 > Php编程 >

ajax对数据删除、查看详情功能

2018-06-22 05:12:34来源：未知阅读 ()

运用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="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>
<div class="page-header">
    <h1>显示数据
    </h1>
</div>
<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） -->
<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">&times;</button>
                <h4 class="modal-title" id="myModalLabel">详细信息</h4>
            </div>
            <div class="modal-body" id="nr">
                
            </div>
            <div class="modal-footer">
            
                <button type="button" class="btn btn-default" 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' class='btn btn-info btn-sm sc' code='"+lie[0]+"'>删除</button><button type='button' class='btn btn-primary btn-sm xq' 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);