在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 相关文章推荐
UCenter中的一个可逆加密函数authcode函数代码
Jul 20 PHP
hessian 在PHP中的使用介绍
Dec 13 PHP
解析php中的escape函数
Jun 29 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
Jul 19 PHP
Chrome Web App开发小结
Sep 04 PHP
php递归遍历多维数组的方法
Apr 18 PHP
PHP中把错误日志保存在系统日志中(Windows系统)
Jun 23 PHP
php数据库操作model类(使用__call方法)
Nov 16 PHP
php实现XML和数组的相互转化功能示例
Feb 08 PHP
万能的php分页类
Jul 06 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
May 21 PHP
PHP的mysqli_rollback()函数讲解
Jan 23 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 组件化编程技巧
2009/06/06 PHP
php 智能404跳转代码,适合换域名没改变目录的网站
2010/06/04 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
set_exception_handler函数在ThinkPHP中的用法
2014/10/31 PHP
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
js获取或设置当前窗口url参数的小例子
2013/10/14 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
jQuery鼠标事件汇总
2015/08/30 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
Python实现注册、登录小程序功能
2018/09/21 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
Python 如何提高元组的可读性
2019/08/26 Python
python zip()函数使用方法解析
2019/10/31 Python
python实现数字炸弹游戏
2020/07/17 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
Revolution Beauty美国官网:英国知名化妆品网站
2018/07/23 全球购物
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
软件工程专业推荐信
2013/10/28 职场文书
关于工资低的辞职信
2014/01/14 职场文书
创业计划书的写作技巧及要点
2014/01/31 职场文书
妇女儿童发展规划实施方案
2014/03/16 职场文书
《海底世界》教学反思
2014/04/16 职场文书
创业融资计划书
2014/04/25 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python