最近学习laravel 5.4框架，遇到ajax交互技术的内容整理总结一下：
模板文件部分html代码：
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-danger" onclick="delAll()"><span class="glyphicon glyphicon-trash"></span> 批量删除</button>
<a href="{{ asset('admin/pic/create') }}" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span> 添加图片</a>
<p class="pull-right tots" >共有 <span id="tot">{{count($data)}}</span> 条数据</p>
<form action="" class="form-inline pull-right">
<div class="form-group">
<input type="text" name="" class="form-control" placeholder="请输入你要搜索的内容" id="">
</div>
<input type="submit" value="搜索" class="btn btn-success">
</form>
</div>
<table class="table-bordered table table-hover" id="table">
<tr>
<th><input type="checkbox" name="" id="allsel"></th>
<th>ID</th>
<th>TITLE</th>
<th>SORT</th>
<th>IMG</th>
<th>操作</th>
</tr>
@foreach($data as $value)
<tr id="tr{{$value->id}}">
<td><input type="checkbox" value="{{$value->id}}" name="" class="inputs"></td>
<td>{{$value->id}}</td>
<td>{{$value->title}}</td>
<td><input type="text" onchange="change(this,{{$value->id}})" value="{{$value->sort}}" name ="" id=""></td>
<td><img width="200px" src="/Uploads/Goods/{{$value->img}}" alt=""></td>
<td><a href="/admin/pic/{{$value->id}}/edit" class="glyphicon glyphicon-pencil"></a> <a href="javascript:;" onclick="del(this,{{$value->id}})" class="glyphicon glyphicon-trash"></a></td>
</tr>
@endforeach
</table>
<!-- 分页效果 -->
<div class="panel-footer">
<nav style="text-align:center;">
<ul class="pagination">
@for($i=1;$i<=$page;$i++)
<li><a href="javascript:;" onclick="page(this,{{$i}})">{{$i}}</a></li>
@endfor
</ul>
</nav>
</div>
</div>js部分代码：
<script>
//无刷新的分页
function page(obj,page){
//alert(page);
//发送ajax请求
$.get('/admin/pic',{'page':page},function(data){
//处理数据
//alert(data);
//写入到表格中
$('#table').html(data);
});
}
//全选、反选
$(document).on('click','#allsel',function(){
if($(this).is(":checked")){
$('.inputs').prop('checked',true);
}else{
$('.inputs').prop('checked',false);
}
})
//obj,id 接受参数
function del(obj,id){
//$.post(请求地址,传递参数,响应请求)
//data可以随便命名 主要接收ajax返回的数据
var r=confirm("您确定要删除?")
if (r==true){
$.post('/admin/pic/'+id,{'id':id,'_method':'delete','_token':'{{csrf_token()}}'},
function(data){
//判断接收的数据如果1成功 0失败
if(data){
//移除对应删除的数据
$(obj).parent().parent().remove();
//获取总数据条数
var tot=Number($("#tot").html());
//修改总数据条数
$("#tot").html(--tot);
}else{
alert('删除失败');
}
}
);
} else{
return;
};
}
//批量删除方法
function delAll(){
//alert($(".inputs:checked").length);
//alert('123');
//获取被选中的数据的值
var arr=[];
//获取所有的数据 并且是被选中的
inputs = $(".inputs:checked");//列表前边小复选框
//获取选中数据的value值
for(var i=inputs.length-1; i>=0; i--){
//把值压入到数组
arr.push(inputs.eq(i).val());
}
//alert(arr);
//把arr转换成字符串
str =arr.join(",");//把数组中的所有元素放入一个字符串
var r=confirm("您确定要删除?")
if (r==true){
//发送ajax请求
$.post("{{asset('admin/pic/delAll')}}",{'str':str,'_token':'{{csrf_token()}}'},function(data){
//判断数据
if(data == arr.length){
//移除对应的数据
for(var i=inputs.length-1; i>=0; i--){
$("#tr"+arr[i]).remove();
};
//修改数据个数
tot=Number($("#tot").html())-Number(data);
$("#tot").html(tot);
}else{
alert('删除失败');
}
});
} else{
return;
};
}
//无刷新排序
function change(obj,id){
//获取用户修改的值
var val = $(obj).val();
$.post('/admin/pic/sort',{'id':id,'val':val,'_token':'{{csrf_token()}}'},function(data){
//判断是否修改成功
if(data == 1){
//页面自动刷新
window.location.reload();
}else{
alert('修改失败');
}
});
}
</script>laravel控制器文件：
//后台首页方法 GET
public function index()
{
//计算数据的总条数
$tot=DB::table('pic')->count();
//每页展示几条数据
$length=3;
//计算总页数
$page=ceil($tot/$length);
//判断地址栏参数是否存在
if(isset($_GET['page'])){
//计算分页
$offset=($_GET['page']-1)*$length;
//进行数据库查询
$data = DB::select("select * from pic order by sort asc limit $offset,$length");
//返回json
//return $data;
//返回页面
return view('admin.pic.page')->with('data',$data);
}
//从数据库中读取相关数据
$data = DB::select("select * from pic order by sort asc limit 0,$length");
//var_dump($data);
//加载图片管理界面
return view('admin.pic.index')->with('data',$data)->with('page',$page);
}
//删除图片操作 DELETE
public function destroy(Request $request){
//获取删除id
$id=$request->input('id');
//查询图片
$data=DB::select("select * from pic where id=?",[$id]);
//echo $data[0]->img;
//exit;
//删除操作 1成功 0失败
if(DB::delete('delete from pic where id=?',[$id])){
//删除成功,删除图片
if(!empty($data[0]->img)){
unlink("./Uploads/Goods/".$data[0]->img);
}
return '1';
}else{
return '0';
}
}
//删除所有的方法
public function delAll(Request $request){
$str = $request->input('str');
$data = DB::select("select * from pic where id in ($str)");
//var_dump($data);exit();
//echo $str;
if($a = DB::delete("delete from pic where id in ($str)")){
//循环删除图片
foreach ($data as $value){
if(!empty($value->img)){
unlink("./Uploads/Goods/".$value->img);
}
}
return $a;
}else{
return 0;
}
}
//ajax 修改数据
public function sort(Request $request){
if(DB::update("update pic set sort=? where id=?",[$request->input('val'),$request->input('id')])){
return 1;
}else{
return 0;
}
}ajax分页返回的page.blade.php页面：
<tr>
<th><input type="checkbox" name="" id="allsel"></th>
<th>ID</th>
<th>TITLE</th>
<th>SORT</th>
<th>IMG</th>
<th>操作</th>
</tr>
@foreach($data as $value)
<tr id="tr{{$value->id}}">
<td><input type="checkbox" value="{{$value->id}}" name="" class="inputs"></td>
<td>{{$value->id}}</td>
<td>{{$value->title}}</td>
<td><input type="text" onchange="change(this,{{$value->id}})" value="{{$value->sort}}" name ="" id=""></td>
<td><img width="200px" src="/Uploads/Goods/{{$value->img}}" alt=""></td>
<td><a href="/admin/pic/{{$value->id}}/edit" class="glyphicon glyphicon-pencil"></a> <a href="javascript:;" onclick="del(this,{{$value->id}})" class="glyphicon glyphicon-trash"></a></td>
</tr>
@endforeach路由注意配置一下~
6049
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
