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

2020-11-27 来源：客趣旅游网

这次给大家带来ajax直接改变状态和删除无刷新状态，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体设置一个p，方便js调用
 <p 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});" 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>
 </p> 
</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;
 }
?>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

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