ajax批删、删除、分页
ajax 同步和异步区别？
我们在使用 ajax 一般都会使用异步处理。
异步处理呢就是我们通过事件触发到 ajax，请求服务器，在这个期间无论服务器有没
有响应，客户端的其他代码一样可以运行。
同步处理：我们通过实践触发 ajax，请求服务器，在这个期间等待服务器处理请求，
在这个期间客户端不能做任何处理。当 ajax 执行完毕才会继续执行其他代码。
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕同步 需要等待返回结果才能继续，异步不必等待，一般需要监听异步的结果 同步是在一条直线上的队列，异步不在一个队列上 各走各的 jquery的async:false,这个属性 默认是true：异步，false：同步。
举例：
同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到
我告诉你听到了，才一起去吃饭。
异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到忙完才去吃
饭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td></td>
<td>ID</td>
<td>会员信息</td>
<td>密码</td>
<td>城市</td>
<td>照片</td>
<td>操作</td>
</tr>
{volist name="data.list" id="value"}
<tr>
<td><input type="checkbox" name="box" value="{$value.id}" data-page="{$page}"></td>
<td>{$value.id}</td>
<td>{$value.name}</td>
<td>{$value.pwd}</td>
<td>{$value.city}</td>
<td> <img src="{$value.image}" width="50px" height="50px" /></td>
<td><input type="button" class="del" data-page="{$page}" data-id="{$value.id}" value="删除"></td>
</tr>
{/volist}
</table>
<input type="button" class="dian" data-page="1" value="首页">
<input type="button" class="dian" data-page="{$data.prev}" id="prev" value="上一页">
<input type="button" class="dian" data-page="{$data.next}" id="next" value="下一页">
<input type="button" class="dian" data-page="{$data.last}" id="last" value="尾页">
<input type="button" class="del_all" value="批删" data-page="{$page}">
<form action="http://127.0.0.1/www.yy5.com/tp5.1/public/index.php/index/lian/show" method="post">
<input type="text" name="sou1">
<input type="text" name="sou2"><input type="submit" value="搜素">
</form>
</body>
</html>
<script type="text/javascript" src="../../../jquery-3.3.1.min.js"></script>
<script>
//分页
$('.dian').click(function(){
var getpage=$(this).attr('data-page');
// var sou1=$('#sou1').val();
// alert(sou1);
page(getpage);
})
function page(getpage){
$.ajax({
url:'show',
type:'post',
dataType:'json',
data:{
page:getpage,
flag:true,
},
success:function(data){
console.log(data);
var list=data['list'];
var str='';
$(list).each(function(key,value){
str+='<tr>';
str+='<td><input type="checkbox" name="box" value="'+value.id+'" data-page="'+data.page+'"></td>';
str+='<td>'+value.id+'</td>';
str+='<td>'+value.name+'</td>';
str+='<td>'+value.pwd+'</td>';
str+='<td>'+value.city+'</td>';
str+='<td><img src="'+value.image+'" width="50px" height="50px" alt=""></td>';
str+='<td><input type="button" class="del" data-id="'+value.id+'" data-page="'+data.page+'" value="删除"></td>';
str+='</tr>';
})
$('tr').not(':first').remove();
$('tr:first').after(str);
$('#prev').attr('data-page',data.prev);
$('#next').attr('data-page',data.next);
}
})
}
//单删除
$(document).on('click','.del',function(){
// $('.del').click(function(){
var id=$(this).attr('data-id');
var getpage=$(this).attr('data-page');
// alert(id);
$.ajax({
url:'dell',
dataType:'json',
data:{
id:id
},
success:function(e){
console.log(e);
if(e.code==0){
alert(e.msg);
page(getpage);
}
}
})
})
//多删
$('.del_all').click(function(){
var box=document.getElementsByName('box');
var str='';
for(i=0;i<box.length;i++){
if(box[i].checked==true){
str+=","+box[i].value;
}
};
var id=str.substr(1);
var getpage=$(this).attr('data-page');
alert(getpage);
$.ajax({
url:'all',
dataType:'json',
data:{
id:id
},
success:function(e){
console.log(e);
if(e.code==0){
alert(e.msg);
page(getpage);
}
}
})
})
</script>
浙公网安备 33010602011771号