zoukankan      html  css  js  c++  java
  • ajax结合mysql数据库和smarty实现局部数据状态的刷新

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

    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;
        }
    ?>

  • 相关阅读:
    Orcale 之基本术语一
    robots 小记
    划分子网例题详解 转
    jsp中利用response.senddirect(str)重定向,传递参数新思路
    当有多个form表单请求时如何处理?
    Form表单中的action提交路径问题
    用mysql workbench导出mysql数据库关系图
    eclipse中html编辑环境的搭建
    两个jsp文件运行后弹出对话框 下载文件问题
    Eclipse tomcat配置 未在Eclipse中添加.jar包出错
  • 原文地址:https://www.cnblogs.com/apolloren/p/9034469.html
Copyright © 2011-2022 走看看