ajax实现批量删除

最新推荐文章于 2023-04-02 10:03:12 发布

忘川河畔0096

最新推荐文章于 2023-04-02 10:03:12 发布

阅读量626

点赞数 1

分类专栏：原生ajax

本文链接：https://blog.csdn.net/qq_42966553/article/details/88218677

版权

原生ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<?php
header("content-type:text/html;charset=utf-8");
//echo "张三";
$search = isset($_GET['search'])?$_GET['search']:'';
mysql_connect("127.0.0.1",'root','root');
mysql_select_db("1604");
//设置字符集防止乱码
mysql_query("set names utf8");
/*
  1.每页显示条数
  2.当前页
  3.上一页
  4.下一页
  5.尾页
  6.limit 第一个参数： 偏移量
*/
//每页显示条数
 $size = 3;
 //当前页
 $page = isset($_GET['page'])?$_GET['page']:1;
 //上一页
 $up = $page - 1;
 //下一页
 $down = $page + 1;
 /*
    尾页：
    1.统计数据库里的总条数：$num
    2.尾页：总条数/每页显示的条数  再向上取整
      $last = ceil($num/$size)
 */
$sql = "SELECT * FROM custom WHERE name LIKE '%$search%'";
$res = mysql_query($sql);
//统计数据库里查询的总条数
$num = mysql_num_rows($res);
//尾页
$last = ceil($num/$size);
//limit 第一个参数： 偏移量
$offset = ($page-1) * $size;
$sql = "SELECT * FROM custom WHERE name LIKE '%$search%' limit $offset,$size ";
//echo $sql;
$res = mysql_query($sql);
//取一行
//$data = mysql_fetch_assoc($res)
//一直取
while($data = mysql_fetch_assoc($res)){
  //一维转二维
	$arr[] = $data;
 }
 //print_r($arr);
?>
<table border='1'>
	<tr>
	    <td>复选框</td>
		<td>编号</td>
		<td>姓名</td>
		<td>性别</td>
		<td>年龄</td>
		<td>爱好</td>
		<td>手机号</td>
		<td>操作</td>	
	</tr>
	<?php foreach ($arr as $key => $val) { ?>
	<tr>
	    <td><input type="checkbox" name="box[]" value="<?php echo $val['id'] ?>"></td>
		<td><?php echo $val['id'] ?></td>
		<td><?php echo  str_replace($search,"<font color='red'>$search</font>",$val['name'] )?></td>
		<td><?php echo $val['sex'] ?></td>
		<td><?php echo $val['age'] ?></td>
		<td><?php echo $val['hobby'] ?></td>
		<td><?php echo $val['tel'] ?></td>
		<td><a href="#" onclick=del(<?php echo $val['id'] ?>,<?php echo $page ?>)>删除</a></td>
		
	</tr>
	<?php } ?>
</table>
<input type="button" value="全选" onclick="checkAll()">
<input type="button" value="全不选" onclick="checkNone()">
<input type="button" value="反选" onclick="checkFan()">
<input type="button" value="批删" onclick="delAll(<?php echo $page ?>)">
<a href="javascript:void(0)" onclick="show(1)">首页</a>
<?php if($page>1) { ?>
<a href="javascript:void(0)" onclick="show(<?php echo $up ?>)">上一页</a>
<?php  } ?>

<?php if($page<$last)  { ?>
<a href="javascript:void(0)" onclick="show(<?php echo $down ?>)">下一页</a>
<?php  } ?>
<a href="javascript:void(0)" onclick="show(<?php echo $last ?>)">尾页</a>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	显示数据
	用户名：<input type="text" id="search"><input type="button" value="搜索" onclick="show(1)">
	<div id="sc"></div>
</body>
</html>
<script>
    //执行函数
    show(1);
    //显示数据
	function show(page){
		var search = document.getElementById("search").value;
		//1.创建ajax对象
		var ajax = new XMLHttpRequest();
		//2.连接服务器
		ajax.open('get','show.php?search='+search+'&page='+page,true);
		//3.发送请求
		ajax.send(null);
		/*
		   ajax:接值：
		   1.监听事件：onreadystatechang去监听ajax.readyState什么时候等于4
		   2.判断 ：ajax.readyState==4 ajax.status=200
		   3.接值:ajax.responseText
		*/
		ajax.onreadystatechange = function (){
			if(ajax.readyState==4&&ajax.status==200){
				var c = ajax.responseText;
				//alert(c);
				document.getElementById("sc").innerHTML = c;
			}
		}
	}
	//删除
	function del(id,page){
     //1.创建ajax对象
		var ajax = new XMLHttpRequest();
		//2.连接服务器
		ajax.open('get','del.php?id='+id,true);
		//3.发送请求
		ajax.send(null);
		/*
		   ajax:接值：
		   1.监听事件：onreadystatechang去监听ajax.readyState什么时候等于4
		   2.判断 ：ajax.readyState==4 ajax.status=200
		   3.接值:ajax.responseText
		*/
		ajax.onreadystatechange = function (){
			if(ajax.readyState==4&&ajax.status==200){
				var c = ajax.responseText;
				//alert(c);
				if(c=='1'){
					alert('删除成功');
					//重新显示数据
					show(page);
				}else{
					alert("删除失败");
				}
			}
		}
	}

	//全选
	function checkAll(){
		//1.通过name找对象拿到所有的复选框
		var box = document.getElementsByName("box[]");
		//2.循环把你每一个复选框checked属性改为true  checked=true表示选中
		for(i=0;i<box.length;i++)
			box[i].checked = true;

	}
	//全不选
	function checkNone(){
		//1.通过name找对象拿到所有的复选框
		var box = document.getElementsByName("box[]");
		//2.循环把你每一个复选框checked属性改为false  checked=false表示不选中
		for(i=0;i<box.length;i++)
			box[i].checked = false;

	}
	//反选
	function checkFan(){
		//1.通过name找对象拿到所有的复选框
		var box = document.getElementsByName("box[]");
		//2.循环判断你每一个复选框 如果checked属性为false改为true
		for(i=0;i<box.length;i++){
            if(box[i].checked==false){
              box[i].checked = true;
            }else{
              box[i].checked = false;
            }
		}

	}
	//批删
	function delAll(page){
		var ids = '';
		var box = document.getElementsByName("box[]");
		//1.循环判断哪些复选框是选中
		for(i=0;i<box.length;i++){
			if(box[i].checked==true){
				ids += ',' + box[i].value;
			}
		}
		//去掉，
		ids = ids.substr(1);
		//console.log(ids);
		//使用ajax发送请求
	    //1.创建ajax对象
		var ajax = new XMLHttpRequest();
		//2.连接服务器
		ajax.open('get','del.php?id='+ids,true);
		//3.发送请求
		ajax.send(null);
		/*
		   ajax:接值：
		   1.监听事件：onreadystatechang去监听ajax.readyState什么时候等于4
		   2.判断 ：ajax.readyState==4 ajax.status=200
		   3.接值:ajax.responseText
		*/
		ajax.onreadystatechange = function (){
			if(ajax.readyState==4&&ajax.status==200){
				var c = ajax.responseText;
				//alert(c);
				if(c=='1'){
					alert('删除成功');
					//重新显示数据
					show(page);
				}else{
					alert("删除失败");
				}
			}
		}

	}
</script>

忘川河畔0096

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax实现批量删除

&lt;?phpheader("content-type:text/html;charset=utf-8");//echo "张三";$search = isset($_GET['search'])?$_GET['search']:'';mysql_connect("127.0.0.1",'root','root');mysql_select_db("1604");//设置字符集防止乱...
复制链接

扫一扫