laravel基础课程---12、lavarel的ajax操作2（lavarel的ajax使用总结）
一、总结
一句话总结：
比较简单：就是js请求ajax，然后控制器获取请求参数，返回数据即可
1、laravel修改某个板块修改图片中 form的目标地址action如何写？
路径带参数+路由参数：form action="/admin/pic/{{$data->id}}"：这样传过来的路由参数（比如id）在控制器中用一个变量接收就好
2、lavarel查看页面提交的所有数据？
Request对象的all()方法
3、比如修改某个板块操作需要做成无刷修改么？
不需要，直接跳回列表页面即可
4、修改板块（板块中带图片）操作需要注意的是什么？
删除原图操作：原图和新图是否一样，不一样就删除原图
5、无刷新分页的实现思路及原理？
数据库实现原理：分页的原理 limit
思路一：vue双向绑定+ajax（推荐）：
思路二：控制器直接返回分页页面数据
1、分页的原理 limit
1 0,3
2 3,3
3 6,3
6、最基本 的分页实现思路？
控制器：确定分页和页数和每页显示的数据
视图：ajax请求分页 + 遍历输出分页图标
控制器返回的数据：分页视图要显示的数据 ：和我项目中的一样
<!-- 分页效果 -->
<div class="panel-footer">
<nav style="text-align:center;">
<ul class="pagination">
@for($i=1;$i<=$page;$i++)
<li><a href="javascript:;" onclick="page1(this,{{$i}})">{{$i}}</a></li>
@endfor
</ul>
</nav>
</div>
// 无刷新的分页
function page(obj,page){
// 发送ajax请求
var str='<tr><th><input type="checkbox" name="" id=""></th><th>ID</th><th>TITLE</th><th>SORT</th><th>IMG</th><th>操作</th></tr>';
$.get('/admin/pic',{'page':page},function(data){
// 处理数据
for(var i=0;i<data.length;i++){
str+='<tr id="tr'+data[i].id+'">';
str+='<td><input type="checkbox" value="'+data[i].id+'" name="" class="inputs" id=""></td>';
str+='<td>'+data[i].id+'</td>'
str+='<td>'+data[i].title+'</td>'
str+='<td><input type="text" onchange="change(this,'+data[i].id+'" value="'+data[i].sort+'" name="" id=""></td>'
str+='<td><img width="200px" src="/Uploads/Goods/'+data[i].img+'" alt=""></td>'
str+='<td><a href="/admin/pic/'+data[i].id+'/edit" class="glyphicon glyphicon-pencil"></a> <a href="javascript:;" onclick="del(this,'+data[i].id+')" class="glyphicon glyphicon-trash"></a></td>';
str+='</tr>';
}
// 写入到表格中
$("#table").html(str);
});
}
控制器
// 后台商品管理首页方法
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");
// dd($data);
// 加载用户管理页面
return view('admin.pic.index')->with('data',$data)->with('page',$page);
}
7、做无刷新分页的时候，如果不用vue双向绑定，直接用php来实现，那么更新分页数据会需要非常麻烦复杂的在js中的拼接 html代码，如何解决？
新弄了一个page页面：直接在控制器中返回这个页面：这样不用拼接复杂的html代码
直接在控制器中返回一个page页面：在页面中 刷新page数据（是一个page页面）：return view('admin.pic.index')->with('data',$data)->with('page',$page);
控制器
// 后台商品管理首页方法
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");
// dd($data);
// 加载用户管理页面
return view('admin.pic.index')->with('data',$data)->with('page',$page);
}
function page1(obj,page){
// 发送ajax请求
$.get('/admin/pic',{'page':page},function(data1){
// 处理数据
alert($("#main").html());
$("#main").html(data1);
});
}
page.blade.php
<th><input type="checkbox" name="" id=""></th>
<th>ID</th>
<th>TITLE</th>
<th>SORT</th>
<th>IMG</th>
<th>操作</th>
@foreach($data as $value)
<tr id="tr{{$value->id}}">
<td><input type="checkbox" value="{{$value->id}}" name="" class="inputs" id=""></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
二、内容在总结中
