ajax结合mysql数据库和smarty实现局部数据状态的刷新

2017-12-20 08:19:07来源:CSDN作者:living_ren人点击

分享

效果状态:通过点击锁定状态实现状态锁定与不锁定之间的切换



1.主程序:01.php导入smarty和mysql类,取得数据导入列表模板

<?php
    include './include/Mysql.class.php';
    include './libs/Smarty.class.php';
    $db=new Mysql;
    $smarty=new Smarty;
    $lists=$db->getALL('users');
    $smarty->assign('lists',$lists);
    $smarty->display('list.html');
?>


2.列表模板采用smarty遍历模板数据并显示,其中调用ajax改变锁定状态

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>用户权限展示表</title>
</head>
<body>
        <table align="center" border="1" width="500">
            <center><h2>用户权限表</h2></center>
            <tr>
                <th>uid</th><th>用户名</th><th>密码</th><th>锁定状态</th><th>角色</th>
            </tr>    
            {foreach $lists as $list}
                <tr align="center">
                    <td>{$list.uid}</td>
                    <td>{$list.username}</td>
                    <td>{$list.password}</td>
                    {if $list.is_lock==1}
                        <td><a href="javascript:lock(0,{$list.uid});">锁定</a></td>
                        {else}
                        <td><a href="javascript:lock(1,{$list.uid})";>取消锁定</a></td>    
                    {/if}        
                    {if $list.role==1}
                            <td>管理员</td>
                    {else}
                            <td>编辑者</td>        
                    {/if}
                </tr>        
            {/foreach}    
        </table>    
</body>
        <script type="text/javascript">
            function lock(lock,uid){
                    //创建ajax对象
                    var xhr=new XMLHttpRequest();

                    //打开一个链接
                    xhr.open('get','02.php?is_lock='+lock+"&uid="+uid);
                    //发送ajax请求
                    xhr.send(null);
                    //设置回调、监听函数
                    xhr.onreadystatechange=function(){
                        //如果ajax状态码响应正常且网络正常,获取响应文本
                        if(xhr.readyState==4&&xhr.status==200){
                            if(xhr.responseText){
                                window.location.reload();
                            }else{
                                alert("切换状态失败!");
                            }

                        }
                    }
                }
        </script>
</html>

3.ajax响应脚本,接收ajax通过get方式传递过来的数据更改数据库内容并响应文本传回js脚本

<?php
    include './include/Mysql.class.php';
    $lock=$_GET['is_lock'];
    $uid=$_GET['uid'];

    $db=new Mysql;
    $result=$db->update('users',"is_lock=$lock","uid=$uid");
    if($result){
        echo true;
    }else{
        echo false;
    }
?>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台