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

2023-06-08 06:51

短信预约 -IT技能 免费直播动态提醒

这篇文章给大家分享的是有关ajax如何实现改变状态和删除无刷新的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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><h3>用户权限表</h3></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+"&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;  }?>