laravel基础课程---12、lavarel的ajax操作2(lavarel的ajax使用总结)
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
二、内容在总结中
laravel基础课程---12、lavarel的ajax操作2(lavarel的ajax使用总结)的更多相关文章
- laravel基础课程---13、数据库基本操作2(lavarel数据库操作和tp对比)
laravel基础课程---13.数据库基本操作2(lavarel数据库操作和tp对比) 一.总结 一句话总结: 非常非常接近:也是分为两大类,原生SQL 和 数据库链式操作 学习方法:使用时 多看手 ...
- laravel基础课程---14、表单验证(lavarel如何进行表单验证)
laravel基础课程---14.表单验证(lavarel如何进行表单验证) 一.总结 一句话总结: lavarel的验证的功能比tp要[简单]且[强大]很多 直接控制器中:添加[规则数组]和[修改提 ...
- laravel基础课程---15、分页及验证码(lavarel分页效果如何实现)
laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...
- laravel基础课程---11、lavarel的ajax操作(ajax优劣势是什么)
laravel基础课程---11.lavarel的ajax操作(ajax优劣势是什么) 一.总结 一句话总结: 优势:用户友好度:异步通信,不会频繁刷新页面,用户友好度比较高 优势:减轻数据库压力 缺 ...
- laravel基础课程---9、视图(lavarel的模板语法和tp相比怎样)
laravel基础课程---9.视图(lavarel的模板语法和tp相比怎样) 一.总结 一句话总结: lavarel的模板语法比thinkphp好用很多:和html代码配合的更好 lavarel比t ...
- laravel基础课程---10、数据库基本操作(如何使用数据库)
laravel基础课程---10.数据库基本操作(如何使用数据库) 一.总结 一句话总结: 1.链接数据库:.env环境配置里面 2.执行数据库操作:DB::table('users')->up ...
- laravel基础课程---8、laravel响应和视图(响应是什么)
laravel基础课程---8.laravel响应和视图(响应是什么) 一.总结 一句话总结: 就是向请求返回的响应数据(一般为html(视图),当然也可以是变量值):所有的路由及控制器必须返回某个类 ...
- laravel基础课程---16、数据迁移(数据库迁移是什么)
laravel基础课程---16.数据迁移(数据库迁移是什么) 一.总结 一句话总结: 是什么:数据库迁移就像是[数据库的版本控制],可以让你的团队轻松修改并共享应用程序的数据库结构. 使用场景:解决 ...
- laravel基础课程---7、文件处理、闪存、cookie(cookie原理和使用场景)
laravel基础课程---7.文件处理.闪存.cookie(cookie原理和使用场景) 一.总结 一句话总结: 页面请求服务器的时候是把这个页面中所有的cookie都带上了的,cookie里面也存 ...
随机推荐
- 关于rtsp转码rtmp播放的两种方式,客户端直接转,远程服务器转
需求 一.场景 用户多家门店有监控探头,设备是海康的和大华的.用户总部和门店不在一个网络下,并且总部要能实时调用查看门店监控,和门店回放画面.我们知道监控摄像机获取的视频是 rtsp 流的格式. 只能 ...
- Vue 响应式数据说明
值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的.也就是说如果你添加一个新的属性,比如: vm.b = 'hi' 那么对 b 的改动将不会触发任何视图的更新. 这里唯一的例外是使用 ...
- 开发ActiveX控件调用另一个ActiveX系列2——调试ActiveX
关于调试ActiveX控件,有若干方法,例如可以建一个MFC工程调用调试,我则倾向于使用附加到浏览器进程,因为浏览器才是真正运行的环境. 打开加载ActiveX的目标页面,当然希望我们的调试内容不是自 ...
- Spring Security实现短信验证码登录
Spring Security默认的一个实现是使用用户名密码登录,当初我们在开始做项目时,也是先使用这种登录方式,并没有多考虑其他的登录方式.而后面需求越来越多,我们需要支持短信验证码登录了,这时候再 ...
- 畅通project再续 HDU杭电1875 【Kruscal算法 || Prim】
Problem Description 相信大家都听说一个"百岛湖"的地方吧.百岛湖的居民生活在不同的小岛中.当他们想去其它的小岛时都要通过划小船来实现.如今政府决定大力发展百岛湖 ...
- 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径。路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子。如果一条路径经过了矩阵中的某一个格子,则该路径不能再进入该格子。 例如 a b c e s f c s a d e e 矩阵中包含一条字符串"bccced"的路径,但是矩阵中不包含"abcb"路径,因为字符串的第一个字符b占据了矩阵中
// test20.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...
- JS常见事件以及函数
1.js enter键激发事件 document.onkeydown = function (e) { if (!e) e = window.event; ...
- oracle索引INdex
索引是与表相关的一种可选择数据库对象.索引是为提高数据检索的性能而建立,利用它可快速地确定指定的信息. 索引可建立在一表的一列或多列上,一旦建立,由ORACLE自动维护和使用,对用户是完全透明的.然而 ...
- 编译EasyDSS rtmp流媒体服务器遇到stray '_239' inprogram,stray '_187' inprogram,stray '_191' inprogram的解决办法
使用用户提供的交叉编译工具链编译easydss时遇到一个编译错误 stray '\239' inprogram stray '\187' inprogram stray '\191' inprogra ...
- 安装配置Django
安装配置Django 以下是基于python3.5 pip install Django 把python环境目录Scripts配置到环境变量,主要在命令行中随时可以使用django-admin 验证 ...