基於layui的表格異步刪除,ajax的簡單運用
h話不多說,看圖,點擊刪除,出現確認框,然後點擊確認刪除,直接刪除數據,
因為是基於面向過程的,沒有用php框架寫,所以有3個文件:
第一個文件:data.php:用於從數據庫中獲取數據
<?php
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");
}
catch(PDOException $e){
echo "數據庫連接失敗:".$e->getMessage();
exit;
}
$query = "select * from info";
$pdostatement = $pdo->query($query);
$result = $pdostatement->fetchAll(PDO::FETCH_ASSOC);
第二個文件:index.php 展示頁面;
<?php
include "./data.php";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/layui.css" media="all">
</head>
<body>
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>ID</th>
<th>名稱></th>
<th>級別</th>
<th>編號</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php foreach($result as $key=>$v):?>
<tr>
<td><?php echo $v[‘id‘]?></td>
<td><?php echo $v[‘name‘]?></td>
<td><?php echo $v[‘level‘]?></td>
<td><?php echo $v[‘code_name‘]?></td>
<td><button class="delete">刪除</button></td>
</tr>
<?php endforeach;?>
</tbody>
</table>
</body>
</html>
<script src="./layui/layui.js"></script>
<script src="./js/jquery-1.10.2.min.js"></script>
<script>
$(function(){
layui.use(‘layer‘, function(){
var layer = layui.layer;
$(".delete").click(function(){
var id =$(this).parents(‘tr‘).find(‘td‘).eq(0).html();
layer.confirm("確認刪除?",function(){
layer.msg(id);
$.ajax({
url: "./do_delete.php" ,
data: {‘id‘:id} ,
type: "post" ,
dataType:‘json‘,
success:function(data){
if(data.code==200){
location.reload();
}else{
layer.msg("刪除失敗");
}
}
})
})
})
});
})
</script>
第三個頁面:do_delete.php :ajax的處理頁面:
<?php
try{
$pdo = new PDO("mysql:host=localhost;dbname=test","root","root");
}
catch(PDOException $e){
echo "數據庫連接失敗:".$e->getMessage();
exit;
}
$id = $_POST["id"];
$query = "delete from info where id=‘$id‘";
$result = $pdo->exec($query);
if($result){
echo json_encode(array("code"=>200));
}else{
echo json_encode(array(‘code‘=>400));
}
上面就是全部代碼,基於mvc的也是一樣的思路,比這個更簡單,可以自己試試看,
基於layui的表格異步刪除,ajax的簡單運用