ajax实现改变状态和删除无刷新

2017-12-21 07:45:52来源:CSDN作者:living_ren人点击

分享

1.  01.php为主程序,调用smarty模板遍历输出:

<?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.  list.html模板:内容结合JS ajax使用:

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>用户权限展示表</title>
</head>
<body>
        //给table体设置一个div,方便js调用
        <div id="table">
        <table align="center" border="1" width="500">
            <center><h2>用户权限表</h2></center>
            <tr>
                <th>uid</th><th>用户名</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}
                    <td><a href="javascript:del({$list.uid})">删除</a></td>
                </tr>        
            {/foreach}    
        </table>
        </div>    
</body>
        <script type="text/javascript">
            function lock(lock,uid){
                    //创建ajax对象
                    var xhr=new XMLHttpRequest();

                    //打开一个链接
                    xhr.open('post','02.php');
                    //设置头信息
                    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                    //取值,多个参数用&分开
                    var data="is_lock="+lock+"&uid="+uid;
                    //发送ajax数据请求
                    xhr.send(data);
                    //设置回调、监听函数
                    xhr.onreadystatechange=function(){
                        //如果ajax状态码响应正常且网络正常,获取响应文本
                        if(xhr.readyState==4&&xhr.status==200){
                            if(xhr.responseText){
                                document.getElementById('table').innerHTML=xhr.responseText;
                            }else{
                                alert("切换状态失败!");
                            }
                        }
                    }
                }

        function del(uid){
            var del=window.confirm("您确定要删除吗?");
            if(del){
                //创建ajax对象
                var xhr=new XMLHttpRequest();
                //打开一个链接
                xhr.open('post','del.php');
                //设置header头
                xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
                //data取值
                var data="uid="+uid;
                //发送ajax请求
                xhr.send(data);
                //设置监听
                xhr.onreadystatechange=function(){
                    //如果ajax状态码响应正常且网络正常,获取响应文本
                    if(xhr.readyState==4&&xhr.status==200){
                        if(xhr.responseText){
                            //用ajax响应内容替换本模板中table标签的内容
                            document.getElementById('table').innerHTML=xhr.responseText;
                        }else{
                            alert("删除失败!");
                        }
                    }
                }
            }
        }        
        </script>
</html>

3.  02.php改变状态无刷新:

<?php
    include './include/Mysql.class.php';
    include './libs/Smarty.class.php';
    $lock=$_POST['is_lock'];
    $uid=$_POST['uid'];
    $smarty=new Smarty;
    $db=new Mysql;
    $result=$db->update('users',"is_lock=$lock","uid=$uid");
    if($result){
        //修改成功重新遍历数据库并输出smarty模板
        $lists=$db->getALL('users');
        $smarty->assign('lists',$lists);
        $smarty->display('list.html');
    }else{
        echo false;
    }
?>

4.del.php实现删除无刷新

<?php
    include './include/Mysql.class.php';
    include './libs/Smarty.class.php';
    $db=new Mysql;
    $smarty=new Smarty;
    $uid=$_POST['uid'];
    $res=$db->delete('users',$uid);
    if($res>0){
        $lists=$db->getALL('users');
        $smarty->assign('lists',$lists);
        $smarty->display('list.html');
    }else{
        echo false;
    }
?>

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台