Home >Web Front-end >JS Tutorial >Ajax changes status directly and deletes status without refresh
This time I will bring you ajax to directly change the state and delete the non-refresh state. What are the precautions for ajax to directly change the state and delete the non-refresh state. The following is a practical case, let's take a look.
1. 01.php is the main program, calling the smarty template to traverse the output:
<?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 template: content combined with 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 changes status without refreshing:
<?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 achieves deletion without refreshing
<?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;
}
?> I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website ! Recommended reading:
Detailed explanation of the use of JS’s multi-threaded runtime library Nexus.js
JS makes mobile touch Carousel effect
The above is the detailed content of Ajax changes status directly and deletes status without refresh. For more information, please follow other related articles on the PHP Chinese website!