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


Posted in PHP onOctober 03, 2019

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>

效果:

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

PHP 相关文章推荐
PHP脚本的10个技巧(2)
Oct 09 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
Feb 11 PHP
在PHP中使用Sockets 从Usenet中获取文件
Jan 10 PHP
一个php Mysql类 可以参考学习熟悉下
Jun 21 PHP
php smarty截取中文字符乱码问题?gb2312/utf-8
Nov 07 PHP
PHP exif扩展方法开启详解
Jul 28 PHP
php操作mongoDB实例分析
Dec 29 PHP
PHP中异常处理的一些方法整理
Jul 03 PHP
php将数组存储为文本文件方法汇总
Oct 28 PHP
学习php设计模式 php实现抽象工厂模式
Dec 07 PHP
ThinkPHP设置禁止百度等搜索引擎转码(简单实用)
Feb 15 PHP
thinkPHP简单实现多个子查询语句的方法
Dec 05 PHP
laravel 实现登陆后返回登陆前的页面方法
Oct 03 #PHP
解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
Oct 03 #PHP
基于laravel-admin 后台 列表标签背景的使用方法
Oct 03 #PHP
浅谈laravel-admin的sortable和orderby使用问题
Oct 03 #PHP
关于laravel后台模板laravel-admin select框的使用详解
Oct 03 #PHP
laravel-admin select框默认选中的方法
Oct 03 #PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
Oct 03 #PHP
You might like
评分9.0以上的动画电影,剧情除了经典还很燃
2020/03/04 日漫
php 传值赋值与引用赋值的区别
2010/12/29 PHP
JavaScript CSS修改学习第一章 查找位置
2010/02/19 Javascript
jQuery EasyUI API 中文文档 - EasyLoader 加载器
2011/09/29 Javascript
js复制到剪切板的实例方法
2013/06/28 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
jquery禁用右键单击功能屏蔽F5刷新
2014/03/17 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
JavaScript入门教程之引用类型
2016/05/04 Javascript
详解在 Angular 项目中添加 clean-blog 模板
2017/07/04 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
2017/11/10 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Python迭代器和生成器介绍
2015/03/06 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Django 忘记管理员或忘记管理员密码 重设登录密码的方法
2018/05/30 Python
Python 实现输入任意多个数,并计算其平均值的例子
2019/07/16 Python
python实现超级马里奥
2020/03/18 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
巴西宠物商店:Cobasi
2019/04/19 全球购物
自荐信结尾
2013/10/27 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
学雷锋志愿者活动总结
2014/06/27 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
2015年纪念“卢沟桥事变”78周年活动方案
2015/05/06 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
关于运动会的广播稿
2015/08/19 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
详解Python内置模块Collections
2022/03/22 Python