在Laravel中实现使用AJAX动态刷新部分页面


Posted in PHP onOctober 15, 2019

AJAX相信大家都不陌生,有很多不同的Javascript Frameworks可以用来快速实现AJAX功能。那么今天我们一起来看一下如何在使用了PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。

这里我使用的是jQuery + Laravel(当然如果使用了其他框架,基本的概念也是不变的)。如图,假设我们制作了一个页面来管理客户的茶叶消耗:

在Laravel中实现使用AJAX动态刷新部分页面

我们想制作一个模块来动态为每一个新的茶叶消耗增加一个消耗选择区,即点击新增消耗后,会动态增加一个新的茶叶消耗区域:

在Laravel中实现使用AJAX动态刷新部分页面

另外,当点击删除该消耗时,该消耗区域会动态删除。

要实现这样的功能,我们的基本思路如下(MVC Pattern):

使用AJAX POST call来调用Controller的函数

Controller返回我们所需的View中的HTML代码片段

调用AJAX callback函数动态将HTML代码片段插入到页面中

那么首先我们先创建我们的js文件,在这里我新建了一个叫my-ajax-add-tea-consumption.js的文件,并放在了/public/js文件夹中。我们在view模板中使用<script></script>调用:

<!DOCTYPE html>
<html lang="en">
...
<body>
...
 <input type="hidden" name="order_id" value="{{ $order->id }}">
 <div class="tea-consumption">
  <div class="card" id="tea-card-{{ $tea_consumption->id }}>
   <div class="card-header">
    <span>茶叶消耗</span>
    <button type="button">删除该消耗</button>
    <input type="hidden" value="{{ $tea_consumption->id }}">
   </div>
   <div class="card-block">
    <!-- 其他inputs -->
   </div>
  </div>
 </div>
 <button type="button" name="btn-add">新增消耗</button>

 <script src="/js/my-ajax-add-tea-consumption.js"></script>

</body>
</html>

由于 Laravel的Middleware会自动检查CSRF,所以如果使用POST,DELETE等方法的时候我们需要全局设置一下AJAX的header,这样在每次发送AJAX的时候,都会自动发送相应的csrf token,只有Laravel检查与相应session中的token匹配后,才会调用相应的Controller函数。所以在我们首先在view中增加一个meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

然后在我们的my-ajax-add-tea-consumption.js中,加上:

$.ajaxSetup({
 headers: {
  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 }
});

这样就可以了。然后我们开始添加ajax函数(首先是增加模块):

$('button[name="btn-add"]').click( function() {
 //route format: /orders/{id}/add-tea-consumption
 $.post('/orders/' + $('input[name="order_id"]').val()  + '/add-tea-consumption'), function( html ) {
  $('.tea-consumption').append( html );
 });
});

看起来很简单吧,但是要注意的几个地方有:

Button的type一定要写为button,而缺省的话默认type=”submit”,这样一旦button被点击页面就会跳转。

post的url我们填的是laravel中的route(稍后在routes中我们还会叙述)

callback function中的数据html是由controller函数中使用某个view所返回的html代码

好了,那么现在我们的$.post() call会后台访问/orders/{id}/add-tea-consumption这样形式的路径,所以我们在\routes\web.php中加上我们的路径名和处理方式:

route::post('/orders/{id}/add-tea-consumption', 'RoomOrdersController@add_tea_consumption');

即我们希望由RoomOrdersController这个控制器中的add_tea_consumption函数来处理我们的ajax请求。那么我们一起来看一下这个函数到底有些什么内容:

<?php   //RoomOrdersController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\RoomOrder;
use App\RoomTeaConsumption;

class RoomOrdersController extends Controller
{
 ...

 /**
 * Return view fragments in html form
 *
 * @param $order_id
 * @return \Illuminate\Http\Response
 */
 public function add_tea_consumption ( $order_id ) {
  $consumption = RoomTeaConsumption::create([
   'room_order_id' => $order_id
   /* more fields omitted */
  ]);

  return view('partials.tea_consumption')->with([
   'tea_consumption' => $consumption
   /* more fields omitted */
  ]);
 }
}

其实跟平时我们controller中的函数并没有什么区别,因为我们需要返回的本来就是html代码,而调用view()的时候,Laravel已经帮我们生成好了。

这样一来,当ajax call成功返回时,$('.tea-consumption').append( html );就会将view生成的html代码插入我们指定的DOM中,从而动态刷新页面。

值得注意的是,如果你发现你的ajax call返回internal 500错误,那么首先请检查你的csrf是否已经设置好,如果确认没有问题,那么请检查你的view template文件,只要其中有错误,那么就无法返回html,从而造成错误。

要删除模块,其实是差不多的,但是要注意的是,我们的listener不能使用.click()来注入,因为当模块被删除后,.click()注入的listener就会失效,我们需要使用parent的.on()函数:

('.tea-consumption').on('click', '#my-button', function() {
 $.ajax({
  method: 'DELETE',
  url: '/teas/consumption/' + $('this').next('input').val() + '/delete',
  success: function( id ) {
   var sel = $('#tea-card-' + id);
   sel.remove();
  }
 });
});

AJAX需要细心,因为错误比较难debug,所以在开发的时候一定要注意,出现问题了多查阅一下相关API。

以上这篇在Laravel中实现使用AJAX动态刷新部分页面就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
php echo 输出字符串函数详解
May 13 PHP
php下删除一篇文章生成的多个静态页面
Aug 08 PHP
PHP数组循环操作详细介绍 附实例代码
Feb 03 PHP
使用PHP下载CSS文件中的图片的代码
Sep 24 PHP
php设置页面超时时间解决方法
Sep 22 PHP
CodeIgniter常用知识点小结
May 26 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
Jul 18 PHP
laravel5创建service provider和facade的方法详解
Jul 26 PHP
PHP自定义函数格式化json数据示例
Sep 14 PHP
php源码之将图片转化为data/base64数据流实例详解
Nov 27 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
Aug 03 PHP
PHP实现统计所有字符在字符串中出现次数的方法
Oct 17 PHP
Yii框架的redis命令使用方法简单示例
Oct 15 #PHP
解决在laravel中leftjoin带条件查询没有返回右表为NULL的问题
Oct 15 #PHP
解决Laravel5.5下的toArray问题
Oct 15 #PHP
laravel通过a标签从视图向控制器实现传值
Oct 15 #PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
Oct 15 #PHP
laravel 实现划分admin和home 模块分组
Oct 15 #PHP
laravel 根据不同组织加载不同视图的实现
Oct 14 #PHP
You might like
php下封装较好的数字分页方法
2010/11/23 PHP
Trying to clone an uncloneable object of class Imagic的解决方法
2012/01/11 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
使用SyntaxHighlighter实现HTML高亮显示代码的方法
2010/02/04 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
拥抱模块化的JavaScript
2012/03/07 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
2018/03/12 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
vue+element实现表单校验功能
2019/05/20 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
[51:52]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
小结Python用fork来创建子进程注意事项
2014/07/03 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
Scrapy框架使用的基本知识
2018/10/21 Python
python实现数据分析与建模
2019/07/11 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
Python基础之字符串常见操作经典实例详解
2020/02/26 Python
浅谈python量化 双均线策略(金叉死叉)
2020/06/03 Python
python numpy库np.percentile用法说明
2020/06/08 Python
Python extract及contains方法代码实例
2020/09/11 Python
程序设计HTML5 Canvas API
2013/04/08 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
寄语是什么意思
2014/04/10 职场文书
2014年保密工作总结
2014/11/22 职场文书
教师节老师寄语
2015/05/28 职场文书
红高粱观后感
2015/06/10 职场文书
CSS实现多个元素在盒子内两端对齐效果
2021/03/30 HTML / CSS