laravel实现跨域访问(使用laravel和ajax实现整个页面无刷新的操作方法)
类别:编程学习 浏览量:1433
时间:2021-10-12 00:30:25 laravel实现跨域访问
使用laravel和ajax实现整个页面无刷新的操作方法1、数据库文件
|
CREATE TABLE IF NOT EXISTS mr_key ( id int (11) NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '键id' , project_id int (11) NOT NULL COMMENT '外键项目id' , name varchar (100) NOT NULL COMMENT '键名' , structure enum( 'string' , 'hash' , 'list' , 'set' , 'zset' ) COMMENT '数据结构' , ttl varchar (50) NOT NULL COMMENT '过期时间' , user varchar (20) NOT NULL COMMENT '使用者' , reason varchar (255) NOT NULL COMMENT '使用原因' , created_time int (11) NOT NULL COMMENT '创建时间' , isDelete int (2) NOT NULL DEFAULT '0' COMMENT '是否删除(0=不删除,1=删除)' )ENGINE=innodb DEFAULT CHARSET=utf8 COMMENT= '键表' ; |
2、首页的内容
|
@include('layout.nav') @include('layout.slide') < li class = "contain" style = "width: 84%;" id = "contain" > < li style = "width:30%;margin-bottom:20px;" > < select class = "form-control" id = "project" > < option value = "0" >请选择城市</ option > @foreach ($projects as $project) < option value="{{ $project->id }}" @if("{{ $project->id }}" == "{{ $project_id }}")selected="selected"@endif >{{ $project->name }}</ option > @endforeach </ select > </ li > < table class = "table table-hover" > < thead > < tr > < th >id</ th > < th >键名</ th > < th >数据结构</ th > < th >过期时间</ th > < th >使用者</ th > < th >使用原因</ th > < th >操作</ th > </ tr > </ thead > < tbody > @foreach ($keys as $key) < tr > < td >{{ $key->id }}</ td > < td >{{ $key->name }}</ td > < td >{{ $key->structure }}</ td > < td >{{ date("Y-m-d H:i:s", ($key->ttl + $key->created_time)) }}</ td > < td >{{ $key->user }}</ td > < td >{{ $key->reason }}</ td > < td >修改 删除</ td > </ tr > @endforeach </ tbody > < li style = "position:absolute;top:450px;right:120px;" > {{ $keys->render() }} < li style = "float:right;letter-spacing: 2px;margin-left:10px;" class = "pagi__count" > 共< b >{{ $count }}</ b >条数据</ li > </ li > </ table > </ li > |
效果:
3、使用ajax:给选择框加上change事件,触发时,到KeyController下的klist方法,并传入project_id,在klist方法中进行处理,获取数据传出来,将整个页面的body的内容全都改变。
|
<script type= "text/javascript" > $( '#project' ).change( function () { $.post( "{{ url('key/klist') }}/" +$( '#project' ).val(), // 路由为Route::any('/key/klist/{project_id}') { '_token' : '{{ csrf_token() }}' }, function (data) { $( '#body' ).html(data); }); }); </script> |
4、klist的方法:判断传入的project_id为0的话,就获取全部数据,不为0,则获取外键==project_id的key的值,将整个页面都传出去
|
public function klist( $project_id ) { if ( $project_id == 0) { $projects = Project::all(); $keys = Key::orderBy( 'created_time' , 'desc' )->paginate(8); $count = Key:: count (); $project_id = 0; return view( 'key.index' , compact( 'project_id' , 'projects' , 'keys' , 'count' )); } $projects = Project::all(); $keys = Project::find( $project_id )->key()->paginate(8); $count = Project::find( $project_id )->key-> count (); return view( 'key.index' , compact( 'project_id' , 'projects' , 'keys' , 'count' )); } |
5、实现:当下拉框改变时,内容改变并未刷新
以上这篇使用laravel和ajax实现整个页面无刷新的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
原文链接:https://blog.csdn.net/snow_small/article/details/78812748
您可能感兴趣
- laravel8 前后端分离方案(laravel 根据不同组织加载不同视图的实现)
- phplaravel一般开发什么项目(laravel 去掉index.php伪静态的操作方法)
- laravel5.2模型返回数组(解决Laravel5.5下的toArray问题)
- laravel框架两表联查(Laravel 使用查询构造器配合原生sql语句查询的例子)
- laravel后台框架(laravel-admin的多级联动方法)
- laravel检查关联模型(Laravel 关联模型-关联新增和关联更新的方法)
- laravel自定义条件查询(解决laravel groupBy 对查询结果进行分组出现的问题)
- laravel 开发自定义组件(laravel框架模板之公共模板、继承、包含实现方法分析)
- laravel定时脚本(laravel实现按时间日期进行分组统计方法示例)
- php框架laravel使用(laravel5环境隐藏index.php后缀apache的方法)
- laravel框架运行找不到视图(解决laravel资源加载路径设置的问题)
- laravel如何设置默认模块(laravel-admin 中列表筛选方法)
- laravel接口响应时间(laravel请求参数校验方法)
- laravel自定义使用方法(laravel 修改.htaccess文件 重定向public的解决方法)
- laravel框架网站搭建教程(Laravel框架实现文件上传的方法分析)
- laravel数据返回格式(laravel 关联关系遍历数组的例子)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
热门推荐
- linux目录操作功能(Linux 目录结构详细介绍)
- python技巧图解(Python魔法方法功能与用法简介)
- sql server2012下载安装教程(SQL Server 2012 安装与启动图文教程)
- html5代码之翻页(HTML5实现直播间评论滚动效果的代码)
- dedecms怎么添加alt标签(dedecms 取消栏目列表页文章标题设置推荐后的加粗)
- 移动端touch事件
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- laravel对请求参数解密(Laravel开启跨域请求的方法)
- typescript技巧(为什么TypeScript的Enum会出现问题)
- sqlserver 存储过程(SQL Server解析XML数据的方法详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9