使用laravel和ajax实现整个页面无刷新的操作方法

吾爱主题阅读：125 2021-08-26 14:26:00 评论：0

1、数据库文件

1 2 3 4 5 6 7 8 9 10 11 12 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、首页的内容

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 @include('layout.nav') @include('layout.slide') < div class = "contain" style = "width: 84%;" id = "contain" > < div 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 > </ div > < 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 > < div style = "position:absolute;top:450px;right:120px;" > {{ $keys->render() }} < div style = "float:right;letter-spacing: 2px;margin-left:10px;" class = "pagi__count" > 共< b >{{ $count }}</ b >条数据</ div > </ div > </ table > </ div >

效果：

3、使用ajax：给选择框加上change事件，触发时，到KeyController下的klist方法，并传入project_id，在klist方法中进行处理，获取数据传出来，将整个页面的body的内容全都改变。

1 2 3 4 5 6 7 8 <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的值，将整个页面都传出去

1 2 3 4 5 6 7 8 9 10 11 12 13 14 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' )); }