原生PHP+原生ajax批量删除（超简单），ajax删除，ajax即点即改,完整代码，完整实例

效果图：

建表：company

DROP TABLE IF EXISTS `company`;
CREATE TABLE `company` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`company_name` varchar(255) DEFAULT NULL,
`lxr` varchar(255) DEFAULT NULL,
`tel` varchar(255) DEFAULT NULL,
`email` varchar(255) DEFAULT NULL,
`user` varchar(255) DEFAULT NULL,
`pwd` varchar(255) DEFAULT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=gbk;

展示页面：show.php
代码：

<?php
// 连接数据库
$conn = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
// 设置编码方式：sql语句
$result = mysqli_query($conn, "set names utf8");
$sql = "select * from company";
// 查询结果集
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_assoc($result)) {
$data[] = $row;
}
?>
<html>
<meta charset="utf-8">
<title>ajax即点即改</title>
<body>
<h1>人员信息</h1>
<table border="1px solid">
<tr>
　　<th></th>
　　<th>id</th>
　　<th>用户名</th>
　　<th>联系人</th>
　　<th>手机号</th>
　　<th>邮箱</th>
　　<th>单位名称</th>
　　<th>操作</th>
</tr>
<?php foreach ($data as $k => $v) {?>
<tr id="st_<?php echo $v['id'] ?>">
　　<td>
　　　　<input type="checkbox" name="usercheck" value="<?php echo $v['id'] ?>">
　　</td>
　　<td><?php echo $v['id'] ?></td>
　　<td><?php echo $v['user'] ?></td>
　　<td><?php echo $v['lxr'] ?></td>
　　<td><?php echo $v['tel'] ?></td>
　　<td><?php echo $v['email'] ?></td>
　　<td>
　　　　<span id="dian_<?php echo $v['id'] ?>" onclick="changeme(<?php echo $v['id'] ?>)">
　　　　　　<?php echo $v['company_name'] ?>
　　　　</span>
　　　　<input type="hidden" id="input_<?php echo $v['id'] ?>" onblur="doit(<?php echo $v['id'] ?>)">
　　</td>
　　<td onclick="del(<?php echo $v['id'] ?>)">删除</td>
</tr>
<?php }?>
</table>
<input type="checkbox" id="checkall" onclick="ckAll()">全选/全不选
<button onclick="delall()">批量删除</button>
</html>
<script>
//全选
function ckAll(){
// 获取全选按钮的状态，让上面的按钮的选中状态和它的状态相同，
　　var flag=document.getElementById("checkall").checked;
　　var cks=document.getElementsByName("usercheck");
　　for(var i=0;i<cks.length;i++){
　　　　cks[i].checked=flag;
　　}
}
function del(id){
// 实例化ajax对象
　　var xhr=new XMLHttpRequest();
// 打开一个请求
　　xhr.open("get","do_delete.php?id="+id);
// 发送请求
　　xhr.send();
// 监听状态是否变化,状态改变事件
　　xhr.onreadystatechange=function(){
// 请求成功。以及响应结束
　　　　if(xhr.status==200&&xhr.readyState==4){
　　　　　　if(xhr.responseText=='删除成功'){
　　　　　　　　alert('删除成功')
　　　　　　　　document.getElementById("st_"+id).innerHTML=""
　　　　　　};
　　　　}
　　}
}

// 即点即改
function changeme(id){
// 获取span节点
　　var span_node = document.getElementById('dian_'+id)
// 获取input节点
　　var input_node = document.getElementById('input_'+id)
// 1、点击让span 隐藏，让input 显示出来
　　span_node.style.display="none" // 一定是双引号，span标签隐藏
　　input_node.type="text"
}

　　var arr=new Array();

　　for (var i = 0; i < len; i++) {
　　　　if (usercheck[i].checked) {
　　　　　　// console.log(usercheck[i].value)//拼接id　　　　

　　　　　　arr.push(usercheck[i].value

　　　　　　str=str+','+usercheck[i].value,

　　　　　　flag = true;
　　　　}
　　}
　　if (!flag) {
　　　　alert('至少选择一个');
　　　　return;
　　}
// 截取字符串，去除第一个逗号，
　　var id = str.substr(1);
// 实例化ajax对象
　　var xhr=new XMLHttpRequest();
// 打开一个请求
　　xhr.open("get","do_delete.php?id="+id);
// 发送请求
　　xhr.send();
// 监听状态是否变化
　　xhr.onreadystatechange=function(){
// 请求成功。以及响应结束
　　　　if(xhr.status==200&&xhr.readyState==4){

　　　　　　　　for (var i = 0; i < arr.length; i++) {
　　　　　　　　　　id = arr[i]
　　　　　　　　　　document.getElementById("st_"+id).innerHTML=""
　　　　　　　　}

　　　　}
　　}
}
</script>

单删文件：do_delete.php
代码：

<?php
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
// 接收参数id，要删除的额数据的id
$id = $_GET['id'];

$sql = "delete from company where id in ($id)";

// 执行删除

$st = mysqli_query($link, $sql);
if ($st) {
　　echo "删除成功";
} else {
　　echo "删除失败";
}

//即点即改更新数据库,文件：update.php

<?php
// 连接数据库
$link = mysqli_connect('127.0.0.1', 'root', '123456', '12a');
$id = $_GET['id'];
$cname = $_GET['cname'];
$sql = "update company set company_name='$cname' where id=$id";
$st = mysqli_query($link, $sql);
if ($st) {
　　echo "更改成功";
} else {
　　echo "更改失败";
}

巴特西

原生PHP+原生ajax批量删除（超简单），ajax删除，ajax即点即改,完整代码，完整实例

最新文章

热门文章