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

所属分类: 网络编程 / PHP编程 阅读数: 139
收藏 0 赞 0 分享

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')
 
 <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的内容全都改变。

 <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实现整个页面无刷新的操作方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

更多精彩内容其他人还在看

php实现在服务器端调整图片大小的方法

这篇文章主要介绍了php实现在服务器端调整图片大小的方法,实例分析了imageResizer与loadimage操作图片的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php动态绑定变量的用法

这篇文章主要介绍了php动态绑定变量的用法,涉及php变量的判定与动态定义的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php实现读取和写入tab分割的文件

这篇文章主要介绍了php实现读取和写入tab分割的文件,涉及php文件读写及字符串操作的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php正则preg_replace_callback函数用法实例

这篇文章主要介绍了php正则preg_replace_callback函数用法,实例分析了preg_replace_callback函数进行正则替换的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php将字符串随机分割成不同长度数组的方法

这篇文章主要介绍了php将字符串随机分割成不同长度数组的方法,涉及随机数及字符串操作的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php自动给网址加上链接的方法

这篇文章主要介绍了php自动给网址加上链接的方法,可实现对本文中的网址加上链接的功能,涉及正则匹配的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php使用socket post数据到其它web服务器的方法

这篇文章主要介绍了php使用socket post数据到其它web服务器的方法,涉及php使用socket传输数据的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

PHP使用递归方式列出当前目录下所有文件的方法

这篇文章主要介绍了PHP使用递归方式列出当前目录下所有文件的方法,涉及php递归操作文件的相关技巧,需要的朋友可以参考下
收藏 0 赞 0 分享

php获取指定范围内最接近数的方法

这篇文章主要介绍了php获取指定范围内最接近数的方法,可实现根据给定区间长度划分各个区间,并在其中寻找与给定数最接近的数,需要的朋友可以参考下
收藏 0 赞 0 分享

php使用ob_flush不能每隔一秒输出原理分析

这篇文章主要介绍了php使用ob_flush不能每隔一秒输出原理,较为详细的分析了php使用ob_flush的相关原理与Linux下使用cli方式的使用方法,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多