酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
【阿里云】采购季上云仅¥223/3年

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

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-10-03
本篇文章主要介绍了使用laravel和ajax实现整个页面无刷新的操作方法,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

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、实现:当下拉框改变时,内容改变并未刷新


版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/snow_small/article/details/78812748

相关文章

  • TP5框架实现签到功能的方法

    TP5框架实现签到功能的方法

    基于tp5 模型的一个签到功能; 由于存储所有的签到日期数据库会非常庞大,所以签到日期只存储近三个月的。 具体功能: 1、记录最近一次的签到时间 2、每次签到都会添加15积分 3、有连续签到的记录 CREATE TABLE `sp_sign` ( `id` int(11)......
    04-05
  • TP5框架实现一次选择多张图片并预览

    TP5框架实现一次选择多张图片并预览

    点击选择图片(可选多张),确定后将选择的图片显示在页面上,已经选择的图片也可以删除,点击提交将图片提交给后台。 1、效果图 2、code 用input标签并选择type=file,记得带上multiple,不然就只能单选图片了 如果不想通过 ajax 提交,一......
    04-04
  • 使用Entrust扩展包在laravel中实现RBAC的功能的方法

    使用Entrust扩展包在laravel中实现RBAC的功能的方法

    想要在Laravel中使用Entrust,首先需要通过Composer来安装其依赖包: composer require zizaco/entrust 5.2.x-de 安装完成后需要在config/app.php中注册服务提供者到providers数组: Zizaco\Entrust\EntrustServiceProvider::class, 同时......
    03-17
  • Laravel框架下的Contracts契约详解

    Laravel框架下的Contracts契约详解

    Contracts Laravel 的契约是一组定义框架提供的核心服务的接口, 例如我们在介绍用户认证的章节中到的用户看守器契约IllumninateContractsAuthGuard 和用户提供器契约IlluminateContractsAuthUserProvider以及框架自带的App\User模型所实......
    03-17
  • YII2框架中behavior行为的理解与使用方法的介绍

    YII2框架中behavior行为的理解与使用方法的介绍

    YII2中的行为说白了就是对组件功能的扩展,在不改变继承关系的条件下。 行为附加到组件后,行为将注入自已的方法和属性到组件,可以像组件访问自定义的方法和属性一样访问行为。 注意行为是对功能的扩展,不要乱用行为,比如有一个动物类......
    03-14
  • PHP代码加密方法的介绍

    PHP代码加密方法的介绍

    如何保护自己的PHP代码: 代码混淆+加密 实际加密算不上,具体实现思路就是把代码base64加密,然后对base64里的字符串进行字符串映射(随机生成字典混淆)然后eval执行 这种百分之百能被破解还原 代表代码如下: ?php function RandAbc($......
    03-14
  • YII2框架中验证码的简单使用方法

    YII2框架中验证码的简单使用方法

    验证码的使用是比较频繁的。YII2中已经帮我们做好了封装。 首先我们在控制器里创建一个actions方法,用于使用yii\captcha\CaptchaAction ?php namespace app\controllers; use YII;use yii\web\Controller; class IndexController extend......
    03-12
  • php实现账号不能同时登陆的方法【当其它地方登陆时,当前账号失效

    php实现账号不能同时登陆的方法【当其它地方登陆时,当前账号失效

    解决的思路是每当用户登陆时我们必需记录当前的用户id和session_id,如果有人在其它地方用此账号登陆时,我们把此用户id对应的session_id的session文件删除,并重新记录当前的session_id。那么之前的用户就失效了。 login.php代码如下: ......
    03-05
  • php输出缓冲Output Control的用法

    php输出缓冲Output Control的用法

    关于php的输出缓冲,首先要说明的是什么是缓冲(buffer),比如我们通过记事本在编辑文件的时候,并不是我们输入了内容,系统就会立刻向磁盘中写入数据。 只有我们在保存文件后,系统才会向磁盘写入数据。而之前我们输入的内容全部保存在了......
    03-03
  • php使用html5 XHR2实现上传文件与进度显示功能的方法

    php使用html5 XHR2实现上传文件与进度显示功能的方法

    思路:只要我们知道上传文件的总大小,还有上传过程中上传文件的大小,那么就可以实现进度显示了。 在html5中,XMLHttpRequest对象,传送数据的时候,progress事件用来返回进度信息。 它分成上传和下载两种情况 1.下载的progress事件属于......
    03-03

最新更新