AJAX的应用

用AJAX实现数据显示与删除事件

主页面：

<!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>
<script src="../jquery-1.11.2.min.js"></script>
<style type="text/css">
.sc
{ 
    width:70px;
    height:30px;
    background-color:#06F;
    color:#FFF;
    text-align:center;
    line-height:30px;
    vertical-align:middle;
    font-size:18px;
}
.sc:hover{ cursor:pointer;
background-color:#F60;}
</style>
</head>

<body>
<input type="button" id="btn" value="显示数据" />
<table id="xianshi" width="100%" border="1" cellpadding="0" cellspacing="0">
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(e) {
   
    $("#btn").click(function(){        
            ShowAll();
            Bindsc();                
        })
        
        function Bindsc()   //绑定删除事件
        {
            $(".sc").click(function(){
                var code = $(this).attr("bs");  //获取主键值
                $.ajax({
                    
                    url:"Delete.php",
                    data:{code:code},  
                    type:"POST",
                    dataType:"TEXT",
                    success: function(data){
                        
                        if(data.trim()=="OK")
                        {
                            //删除成功后再执行一遍显示全部信息与绑定删除事件的方法，这样就不用刷新页面了
                            ShowAll();
                            Bindsc();       //调用自身方法，因为是在点击删除的时候才执行，所以不会无限循环
                        }
                        else
                        {
                            alert( "删除失败！");    
                        }
                        
                        }                
                    
                    });            
                })    
        }    
    
    function ShowAll()  //显示全部信息
    {
        $.ajax({
            async:false,     //AJAX必须同步，显示完信息再绑定删除事件
            url:"ChuLi.php",
            dataType:"TEXT",   //AJAX返回的数据类型是"TEXT"就必须返回字符串
            success: function(data){
                var str = "<tr><td>代号</td><td>姓名</td><td>性别</td><td>民族</td><td>生日</td><td>操作</td></tr>";
                //将返回的字符串拆分成数组
                var hang = data.split("|"); 
                    for(var i=0;i<hang.length;i++)
                    {
                        var lie = hang[i].split("^");    
                        /*str+="<tr><td>"+lie[0]+"</td><td>"+lie[1]+"</td><td>"+lie[2]+"</td><td>"+lie[3]+
                        "</td><td>"+lie[4]+"</td><td></td></tr>";*/
                        //字符串太长，显得很乱，像这种列数比较多的可以嵌套循环
                        str+="<tr>";
                        for(var j=0;j<lie.length;j++)
                        {
                            str+="<td>"+lie[j]+"</td>";    
                        }
                        str+="<td><div class='sc' bs='"+lie[0]+"'>删除</div></td>";  //添加的bs属性存储主键值
                        str+="</tr>";
                    }
                    $("#xianshi").html(str);
                    
                }    
            
            });        
    }    
    
});
</script>

显示信息处理页面：

<?php
include("../DB.class.php");
$db = new DB();
$sql = "select * from Info";
$attr = $db->Query($sql);
/*返回二维数组，因为返回数据类型是"TEXT"，所以要将二维数组变为字符串，二维数组格式如下：
p001 张三
p002 李四
p003 王五

将列之间用"^"拼接，行之间用"|"拼接，格式如下：

echo "p001^张三|p002^李四|p003^王五";*/

$str="";  //先定义字符串，后面要用
foreach($attr as $v)
{
    $str =$str.implode("^",$v);    //每一列之间用"^"拼接
    $str = $str."|";            //循环完一行后面加上"|"
}
$str = substr($str,0,strlen($str)-1);  //将最后面的"|"截掉
echo $str;

//调用AJAX返回字符串的方法
echo $db->StrQuery($sql);

删除事件处理页面：

<?php
$code = $_POST["code"];
include("../DB.class.php");
$db = new DB();
$sql = "delete from Info where Code = '{$code}'";

$r = $db->Query($sql,1);
if($r)
{
    echo "OK";    
}
else
{
    echo "NO";    
}

注意：本例中删除事件用的是div，当然也可以用<a></a>、button等，但因为要删除数据，所以需要主键值，这就要求div中要存储主键值，所以在div中自定义一个属性bs用来存储主键值。

 

 注意：有些方法调用自身会无限循环，例如：

<script type="text/javascript">
function Test()
    {
        alert("aa");    
        Test();
    }

</script>

本例中调用自身方法，因为是在点击删除的时候才执行，所以不会无限循环

调用AJAX返回字符串的方法封装到数据库类里面：

 

class DB
{
    public $host="localhost";  //服务器地址     默认值为localhost
    public $uid="root";        //数据库用户名  默认值为root
    public $pwd="123";    //数据库密码    默认值为123

        //AJAX调用返回字符串
    //用聚合函数时返回字符串比较方便
    public function StrQuery($sql,$type=0,$db="mydb")
    {
        //1.造连接对象
        $conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
        //2.判断连接是否出错    
        !mysqli_connect_error() or die("连接失败！");
        //3.执行SQL语句
        $result=$conn->query($sql);
        //4.判断语句类型
        if($type==0)
        {
            $attr = $result->fetch_all();            //返回二维数组
            $str = "";
            //如果是查询语句，返回字符串
            for($i=0;$i<count($attr);$i++)    
            {
                for($j=0;$j<count($attr[$i]);$j++)    
                {
                    $str=$str.$attr[$i][$j];
                    $str= $str."^";                     //每一列后面拼接"^"
                }
                $str=substr($str,0,strlen($str)-1);  //把最后的"^"截掉
                $str=$str."|";                       //每一行后面拼接"|"
            }
            $str=substr($str,0,strlen($str)-1);      //把最后的"|截掉"
            return $str;                             //返回字符串
            
        }
        else    //如果是其他语句
        {
            if($result)
            {
                echo "OK";    
            }    
            else
            {
                echo "NO";    
            }
        }
    }
        
}

 

在用聚合函数查询时，StrQuery()比较方便，直接输出字符串即可：

<?php
include("../DB.class.php");
$db = new DB();
$sql = "select count(*) from Info where Code = 'p001'";
//用Query()方法
$attr = $db->Query($sql);
echo $attr[0][0];
//用StrQuery()方法
echo $db->StrQuery($sql);

数据库类里面可以多封装一些方法，用熟之后可以很方便的根据需要调用相应方法 

 

posted @ 2016-05-22 17:20  魅影星魂  阅读(192)  评论(0)  编辑  收藏  举报