使用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 相关文章推荐
新版mysql+apache+php Linux安装指南
Oct 09 PHP
建立文件交换功能的脚本(二)
Oct 09 PHP
phpMyAdmin下载、安装和使用入门教程
May 31 PHP
php 获取完整url地址
Dec 20 PHP
php HtmlReplace输入过滤安全函数
Jul 03 PHP
9个PHP开发常用功能函数小结
Jul 15 PHP
10条PHP高级技巧[修正版]
Aug 02 PHP
注册页面之前先验证用户名是否存在的php代码
Jul 14 PHP
IIS6.0中配置php服务全过程解析
Aug 07 PHP
PHP使用静态方法的几个注意事项
Sep 16 PHP
smarty简单应用实例
Nov 03 PHP
centos 7.2下搭建LNMP环境教程
Nov 20 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
php 静态变量的初始化
2009/11/15 PHP
PHP 检查扩展库或函数是否可用的代码
2010/04/06 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
javascript StringBuilder类实现
2008/12/22 Javascript
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
2013/04/21 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
详解在Angular项目中添加插件ng-bootstrap
2017/07/04 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
2018/08/25 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
Vue配置marked链接添加target=&quot;_blank&quot;的方法
2019/07/19 Javascript
vue点击按钮动态创建与删除组件功能
2019/12/29 Javascript
深入源码解析Python中的对象与类型
2015/12/11 Python
python机器学习理论与实战(二)决策树
2018/01/19 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python 拼接文件路径的方法
2018/10/23 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
pip install python 快速安装模块的教程图解
2019/10/08 Python
如何通过python实现人脸识别验证
2020/01/17 Python
Python对wav文件的重采样实例
2020/02/25 Python
Python datetime模块使用方法小结
2020/06/18 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
自我评价正确写法范文
2013/12/10 职场文书
生物学专业求职信
2014/07/23 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
2015年组织部工作总结
2015/04/03 职场文书