ajax直接改变状态和删除无刷新状态

PHP中文网 • 2025年3月8日 13:19:02 • 编程技术 • 阅读 2

这次给大家带来ajax直接改变状态和删除无刷新状态，ajax直接改变状态和删除无刷新状态的注意事项有哪些，下面就是实战案例，一起来看一下。

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

getALL('users');  $smarty->assign('lists',$lists);  $smarty->display('list.html');?>

登录后复制

2. list.html模板:内容结合JS ajax使用：

    用户权限展示表    //给table体设置一个p，方便js调用        
用户权限表
        {foreach $lists as $list}                  {if $list.is_lock==1}                        {else}                        {/if}              {if $list.role==1}                        {else}                            {/if}                    {/foreach}                          uid 用户名 密码 锁定状态 角色 操作       
          {$list.uid}           {$list.username}           {$list.password} 锁定 取消锁定 管理员 编辑者 删除         
    
            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("删除失败！");            }          }        }      }    }

uid	用户名	密码	锁定状态	角色	操作
{$list.uid}	{$list.username}	{$list.password}	锁定	取消锁定	管理员	编辑者	删除

登录后复制

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

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实现删除无刷新

delete('users',$uid);  if($res>0){    $lists=$db->getALL('users');    $smarty->assign('lists',$lists);    $smarty->display('list.html');  }else{    echo false;  }?>

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！