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
您可能感兴趣
- laravel自定义条件查询(解决laravel groupBy 对查询结果进行分组出现的问题)
- laravel框架如何查询空的信息(Laravel中validation验证 返回中文提示 全局设置的方法)
- laravelblade组件(laravel 验证错误信息到 blade模板的方法)
- laravel授权怎么用(laravel 使用auth编写登录的方法)
- laravel count 报错(解决laravel5.5访问public报错的问题)
- php框架laravel使用(laravel5环境隐藏index.php后缀apache的方法)
- laravel关联查询限制数量(laravel-admin 后台表格筛选设置默认的查询日期方法)
- laravel自定义命令(laravel中数据显示方法默认值和下拉option默认选中)
- laravel设置跨域请求(Laravel实现ApiToken认证请求)
- laravel关闭错误提示(解决laravel session失效的问题)
- laravel api 调试(Laravel框架自定义公共函数的引入操作示例)
- laravel如何设置默认模块(laravel-admin 中列表筛选方法)
- laravel关联模型新增数据(使用laravel的migrate创建数据表的方法)
- laravel api接口开发版本控制(Laravel 创建可以传递参数 Console服务的例子)
- laravel检查关联模型(Laravel 关联模型-关联新增和关联更新的方法)
- laravel权限控制(laravel-admin 在列表页添加自定义按钮的例子)
- ()
- 书法欣赏 宋.志南诗《绝句》(宋.志南诗绝句)
- 每周一首古诗 《绝句》(每周一首古诗绝句)
- 蓝色代表什么(蓝色代表什么性格的人)
- 红色代表什么(红色代表什么情感和含义)
- 南宋志南和尚绝句 杨柳风似庙中来(南宋志南和尚绝句)
热门推荐
- python开启两个线程(Python开启线程,在函数中开线程的实例)
- 浏览器怎么登录宝塔linux面板(宝塔Linux面板如何绑定域名?登录地址是多少?)
- docker镜像如何打包(Docker打包镜像及修改配置的实现)
- 织梦dedecms开启付费授权(去掉织梦DedeCMS列表推荐时标题被加粗的方法)
- mysql8.0自定义安装图解(M1芯片安装mysql8.0数据库的实现步骤图文)
- vue设置属性没响应(Vue.$set 失效的坑 问题发现及解决方案)
- Visual Studio中使用正则表达式替换
- centos7宝塔面板离线安装(linux centos 宝塔面板和安全狗安装过程记录)
- mysql随机获取数据
- php一直提示错误(关于php开启错误提示的总结)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9