Laravel框架基于ajax实现二级联动功能示例

本文实例讲述了Laravel框架基于ajax实现二级联动功能。分享给大家供大家参考，具体如下：

1、html页面：

<div class="form-group">
   <label for="rule">过期规则：</label>
   <select name="rule" id="rule" class="form-control" style="width:20%; margin-right: 40px;">
    <option value="0" rule_id="0">请选择规则</option>
    @foreach($rules as $rule)
       <option value="{{ $rule->value }}" rule_id="{{ $rule->id }}">{{ $rule->name }}</option>
    @endforeach
   </select>
   <label for="time">过期倍数：</label>
   <select name="time" id="time" class="form-control" style="width:20%;">
     <option value="0">请选择倍数</option>
   </select>
   <span id="auto"></span>
</div>

过期规则是在页面加载时，便已经从数据表中取出来放进去了：

$projects = Project::all();
$rules = Rule::all();
return view('key.create', compact('projects', 'rules'));

2、ajax代码：

$("#rule").change(function() {
  $.post("{{ url('key/createTime') }}/"+$(this).find("option:selected").attr("rule_id"), {
    "_token": "{{ csrf_token() }}"
  }, function(data) {
    $("#time").html("<option value='0' name='time'>请选择倍数</option>");
    if(data.value == 0) { // 当选择请选择规则时，不会向下执行
      return false;
    }
    $.each(data, function(i, time) {
      $("#time").append("<option value='" + time.value + "'>" + time.value + "</option>");
    });
    $("#time").append("<option id='auto_time'>自定义</option>");
  });
});

当过期规则改变时，将id传到createTime()方法中

3、createTime()方法：

public function createTime($rule_id)
{  // 当选中的为请选择规则时，自己拼一个数据，当success时，判断
 if ($rule_id == 0) {
   return ['id'=>0, 'value'=>0, 'rule_id'=>0];
 }
 $times = Rule::find($rule_id)->time;
 return $times;
}

对$times的处理：rule和time表是一对多的关系：

public function time()
{
    return $this->hasMany(\App\Model\Time::class, 'rule_id', 'id');
}

4、效果：

更多关于Laravel相关内容感兴趣的读者可查看本站专题：《Laravel框架入门与进阶教程》、《php优秀开发框架总结》、《php面向对象程序设计入门教程》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总》

希望本文所述对大家基于Laravel框架的PHP程序设计有所帮助。

赞 (0)

相关推荐

  • laravel 中如何使用ajax和vue总结

    最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多.本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大,具体不说了,有兴趣的同学可以去官网https://cn.vuejs.org/.laravel 本身php页面是用blade引擎,渲染数据格式: {{msg}} 但是熟悉Vue渲染的同学知道Vue的格式是: <div id="app"> {{ message }} </di

  • 利用laravel+ajax实现文件上传功能方法示例

    前言 大家都知道,早期的XMLHttpRequest不支持文件上传,一般用第三方js插件或者flash,现在可以借助XMLHttpRequest Level 2 的FormData对象实现二进制文件上传,正好最近工作中遇到了这个需求,所以本文就来给大家总结下实现的方法,话不多说了,来一起看看详细的介绍吧. 示例代码 @extends('layouts.art') @section('content') <form class="form-horizontal" id="

  • Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

    本教程基于Laravel 5.4 开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档. 做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单 验证 . 首先在 routes/web.php 中新增两条路由规则: Route::get('post/create', 'PostController@create'); Route::post('post/save', 'PostController@save'); 然后在项

  • Laravel+jQuery实现AJAX分页效果

    本文实例讲述了Laravel+jQuery实现AJAX分页效果.分享给大家供大家参考,具体如下: JavaScript部分: //_______________________ // listener to the [select from existing photos] button $('#photosModal').on('shown.bs.modal', function () { // get the first page of photos (paginated) getPhoto

  • Laravel接收前端ajax传来的数据的实例代码

    最近有时间把公司的项目整理一下,并把遇到的问题解决了.那么今天也算个学习笔记吧! 最近在做一个笔记的项目,技术栈如下:vue.js + laravel + mongodb 首先不得不感叹vue的神奇,项目昨晚之后我会对整个项目中用到的技术和踩过的坑进行一个总结,今天先记录一个前端传送数据给后端,laravel接收的例子. 前端ajax插件我没有使用vue-resource,说实话,用他遇到了坑,所以使用了axios.js,很好用,而且比vue-resource还小. 来看前端代码(省略vue逻辑

  • Laravel框架基于ajax和layer.js实现无刷新删除功能示例

    本文实例讲述了Laravel框架基于ajax和layer.js实现无刷新删除功能.分享给大家供大家参考,具体如下: 1.首先要引入layer.js <script type="text/javascript" src="{{ asset('/public/bootstrap/js/jquery-3.2.1.min.js') }}"></script> <script type="text/javascript" sr

  • Laravel框架基于ajax实现二级联动功能示例

    Laravel框架基于ajax实现二级联动功能示例

    本文实例讲述了Laravel框架基于ajax实现二级联动功能.分享给大家供大家参考,具体如下: 1.html页面: <div class="form-group"> <label for="rule">过期规则:</label> <select name="rule" id="rule" class="form-control" style="width:

  • Laravel框架实现的使用smtp发送邮件功能示例

    本文实例讲述了Laravel框架实现的使用smtp发送邮件功能.分享给大家供大家参考,具体如下: 1..env文件中配置 MAIL_DRIVER=smtp MAIL_HOST=smtp.邮箱后缀 MAIL_PORT=邮件服务器发送端口 MAIL_USERNAME=发送方邮件地址 MAIL_PASSWORD=发送方邮箱生成的第三方登陆码 MAIL_FROM_ADDRESS=发送邮箱地址 MAIL_FROM_NAME=发送方名称 2.config目录下mail.php文件配置 可以不配置,因为会被.

  • Laravel框架实现调用百度翻译API功能示例

    本文实例讲述了Laravel框架实现调用百度翻译API功能.分享给大家供大家参考,具体如下: 前言 最近在弄的视频下载网站,弄seo是人工去google翻译,然后再保存,这样下去很累啊,然后就想到让程序自己去翻译然后保存不就行了嘛,自己主要把中文的seo搞定就OK了.说干就干,最先去找了google 翻译 api,可惜要绑定信用卡,太麻烦,放弃,然后找到百度翻译API,虽然支持的国外语言不多,但最基本的国家也都有了.ok,开始撸码. 代码说明 使用的是Laravel框架,语言包存放在resour

  • ThinkPHP框架结合Ajax实现用户名校验功能示例

    ThinkPHP框架结合Ajax实现用户名校验功能示例

    本文实例讲述了ThinkPHP框架结合Ajax实现用户名校验功能.分享给大家供大家参考,具体如下: 在模板文件中通过ajax获取到用户名,然后在控制器中将用户名与数据库比较,返回校验结果给模板文件. 模板文件路径shop/Home/View/User/register.html <!--register.html--> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q

  • laravel框架实现后台登录、退出功能示例

    本文实例讲述了laravel框架实现后台登录.退出功能.分享给大家供大家参考,具体如下: 我们在写后台管理系统时,登录,退出是避免不了的,那我们如何使用laravel实现呢? 首先,我们来看看登录如何实现? //登录 public function logins(){ //post方式则为登录操作 if(Request()->isMethod('post')){ $info = Request()->only('username','pwd');//过滤表单提交数据,接受用户名,密码 $res

  • Laravel框架实现的记录SQL日志功能示例

    本文实例讲述了Laravel框架实现的记录SQL日志功能.分享给大家供大家参考,具体如下: 在项目开发过程中或者是性能优化中,经常会有要查看执行sql的情况,然而Laravel日志默认不记录执行sql.好在留有相关接口,我们可以很方便的就是想SQl日志功能. 在 App\Providers\EventServiceProvider:class 中的$listen中新增如下 protected $listen = [ 'App\Events\Event' => [ 'App\Listeners\E

  • AngularJS实现的省市二级联动功能示例【可对选项实现增删】

    本文实例讲述了AngularJS实现的省市二级联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net 省市二级联动</title> </head> <style> *{ margin:0; padding:0; } .u

  • PHP+ajax实现二级联动菜单功能示例

    PHP+ajax实现二级联动菜单功能示例

    本文实例讲述了PHP+ajax实现二级联动菜单功能.分享给大家供大家参考,具体如下: 如何实现二级联动 工作原理 二级联动在开发中是比较常见的一个技术点,它主要运用了JS的局部刷新技术ajax,不同于一般页面全局刷新,它只会刷新我们需要改变值的地方,我们首先看下它的工作流程. 第一步:我们会向后台发送一个请求 第二步:后台接受请求后,会返回给我们一个值 第三步:将值用JS呈现在页面中 HTML代码 <html> <head> <title>www.jb51.net 二级

  • Laravel框架基于中间件实现禁止未登录用户访问页面功能示例

    本文实例讲述了Laravel框架基于中间件实现禁止未登录用户访问页面功能.分享给大家供大家参考,具体如下: 1.生成中间件 [root@localhost MRedis]# php artisan make:middleware CheckLogin Middleware created successfully. 2.实现中间件,在app\http\middleware\CheckLogin.php public function handle($request, Closure $next)

随机推荐