当前位置 博文首页 > ajax实现改变状态和删除无刷新的实例

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

    作者:living_ren 时间:2021-09-21 19:13

    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 >
        <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});" rel="external nofollow" >锁定</a></td>
                {else}
                <td><a href="javascript:lock(1,{$list.uid})" rel="external nofollow" ;>取消锁定</a></td>  
              {/if}    
              {if $list.role==1}
                  <td>管理员</td>
              {else}
                  <td>编辑者</td>    
              {/if}
              <td><a href="javascript:del({$list.uid})" rel="external nofollow" >删除</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+"&u切换状态失败!");
                  }
                }
              }
            }
        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="u删除失败!");
                }
              }
            }
          }
        }    
        </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;
      }
    ?>

    以上这篇ajax实现改变状态和删除无刷新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持站长博客。

    jsjbwy