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" src="{{ asset('/public/layer/layer.js') }}"></script>

2、给删除按钮加事件

<a style="font-size: 15px;" type="submit" class="btn" onclick="delUser({{ $user->id }})">删除</a>

3、事件的内容

function delUser(user_id)
{
  layer.confirm('您确定要删除我吗？', {  // 使用layer.js确认弹窗
    btn: ['确定', '取消'],
  }, function() {            // 当确定时执行
    $.post("{{ url('user') }}/" + user_id, {  // 网址、数据、成功后操作
      "_token": "{{ csrf_token() }}",
      "_method": "delete"
    }, function(data) {
      if (data.status == 0) {
        layer.msg(data.msg, { icon: 6});
        location.href = "{{ url('user/index') }}";
      } else {
        layer.msg(data.msg, { icon: 5});
      }
    });
  }, function() {});
}

4、上述事件传到方法内容

public function destroy($user_id)
{
    $res = User::find($user_id)->delete();
    if ($res) {
      $data = [
        'status' => 0,
        'msg' => '删除成功'
      ];
    } else {
      $data = [
        'status' => 1,
        'msg' => '删除失败'
      ];
    }
    return $data;
}

5、完成

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

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

赞 (0)

相关推荐

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

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

  • 利用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框架基于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+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总结

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

  • 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框架基于中间件实现禁止未登录用户访问页面功能示例

    本文实例讲述了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)

  • jQuery基于ajax实现带动画效果无刷新柱状图投票代码

    jQuery基于ajax实现带动画效果无刷新柱状图投票代码

    本文实例讲述了jQuery基于ajax实现带动画效果无刷新柱状图投票代码.分享给大家供大家参考.具体如下: 这里介绍的jQuery ajax投票特效,带动画效果 类似进度条风格的柱状图,以你最喜欢的编程语言是哪一种为例来演示投票效果,以Ajax方式无刷新投票,每点击一次,横向的柱状图就会增长一节.如果在火狐或chrome下浏览,那些柱状图横条是圆角的,在IE8下则无此效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head>

  • Js实现无刷新删除内容

    Js实现无刷新删除内容 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

  • tp5框架基于Ajax实现列表无刷新排序功能示例

    本文实例讲述了tp5框架基于Ajax实现列表无刷新排序功能.分享给大家供大家参考,具体如下: 在后台管理的时候我们有时需要对数据进行排序,以控制数据在模板显示的顺序,排序的原理就是修改数据库,然后更新视图.我们可以单独写一个方法来实现排序的功能,成功后刷新页面,也可以利用Ajax技术,实现数据的局部请求,也就是无刷新排序的功能. 现在想要达到的效果是在排序的input框中输入数值,点击排序实现无刷新排序的功能. 首先是表格(cate.html)这一块我们要单独摘出来,放入到一个单独页面当中,方便

  • ThinkPHP5.1+Ajax实现的无刷新分页功能示例

    本文实例讲述了ThinkPHP5.1+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 无刷新分页可以减轻服务器负担,利用Ajax技术,请求部分信息,提高网站访问速度,是网站建设的必备技术. 需要在后台展示自定义属性列表(lst.html),其中的列表部分摘出来,放到(paginate1.html)中: <div class="row"> <div class="col-sm-12"> <div class="i

  • 前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

    前台用AJAX直接调用后台方法,老有人发帖提问,没事做个示例 CasMenu.aspx页面: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CasMenu.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr

  • TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例

    本文实例讲述了TP5(thinkPHP5)框架基于ajax与后台数据交互操作.分享给大家供大家参考,具体如下: Ajax最大的一点是页面无刷新,在页面内与服务器通信,给用户的体验非常好.可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,节约空间和宽带租用成本.并且减轻服务器的负担,ajax的原则是"按需取数据",可以最大程度的减少冗余请求,和响应对服务器造成的负担. 最近在用tp5开发企业微应用,很有收获,觉得最需要注意的是thinkphp

  • tp5框架基于ajax实现异步删除图片的方法示例

    tp5框架基于ajax实现异步删除图片的方法示例

    本文实例讲述了tp5框架基于ajax实现异步删除图片的方法.分享给大家供大家参考,具体如下: 为了提高用户体验,我们为商品相册制作了ajax无刷新异步删除的功能,过程和方法还是非常值得借鉴的,效果如下: 上面的图片列表中,你点一下旁边的减号就会在不需要刷新当前页面的情况下不光从网页页面上删除图片,也会从服务器端删除该图片,看看我们的核心处理代码吧: 首先是客户端的js代码: function delrow(o){ if(confirm('确定要删除该图吗?')){ var div=$(o).pa

随机推荐