温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么使用laravel和ajax实现整个页面无刷新

发布时间:2021-05-18 11:41:21 阅读:223 作者:小新 栏目:开发技术
开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章给大家分享的是有关怎么使用laravel和ajax实现整个页面无刷新的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

1、数据库文件

CREATE TABLE IF NOT EXISTS mr_key
(
id int(11NOT NULL PRIMARY KEY AUTO_INCREMENT COMMENT '键id',
project_id int(11NOT NULL COMMENT '外键项目id',
name varchar(100NOT NULL COMMENT '键名',
structure enum('string''hash''list''set''zset') COMMENT '数据结构',
ttl varchar(50NOT NULL COMMENT '过期时间',
user varchar(20NOT NULL COMMENT '使用者',
reason varchar(255NOT NULL COMMENT '使用原因',
created_time int(11NOT NULL COMMENT '创建时间',
isDelete int(2NOT NULL DEFAULT '0' COMMENT '是否删除(0=不删除,1=删除)'
)ENGINE=innodb DEFAULT CHARSET=utf8 COMMENT='键表';

2、首页的内容

@include('layout.nav')
 @include('layout.slide')
 
 <div class="contain"  id="contain">
  <div >
   <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 >
    {{ $keys->render() }}
    <div  class="pagi__count"> 共<b>{{ $count }}</b>条数据</div>
   </div>
 
  </table>
 </div>

效果:

怎么使用laravel和ajax实现整个页面无刷新

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实现整个页面无刷新

Laravel 是什么

Laravel 是一套简洁、优雅的PHP Web开发框架。它可以让你从面条一样杂乱的代码中解脱出来;它可以帮你构建一个完美的网络APP,而且每行代码都可以简洁、富于表达力。

感谢各位的阅读!关于“怎么使用laravel和ajax实现整个页面无刷新”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×