在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 相关文章推荐
二十行语句实现从Excel到mysql的转化
Oct 09 PHP
第一节--面向对象编程
Nov 16 PHP
php数组函数序列之array_values() 获取数组元素值的函数与方法
Oct 30 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
Jun 19 PHP
php一次性删除前台checkbox多选内容的方法
Sep 22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
Jun 24 PHP
php连接oracle数据库及查询数据的方法
Dec 29 PHP
php动态生成版权所有信息的方法
Mar 24 PHP
php实现的网络相册图片防盗链完美破解方法
Jul 01 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
Mar 17 PHP
Yii2单元测试用法示例
Nov 12 PHP
Laravel框架使用Seeder实现自动填充数据功能
Jun 13 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
Yii2如何批量添加数据
2016/05/17 PHP
php安装dblib扩展,连接mssql的具体步骤
2017/03/02 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
JS解密入门 最终变量劫持
2008/06/25 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
JS中使用FormData上传文件、图片的方法
2016/08/07 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
vue实现路由不变的情况下,刷新页面操作示例
2020/02/02 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python跳出循环语句continue与break的区别
2014/08/25 Python
python进阶教程之异常处理
2014/08/30 Python
Pycharm学习教程(1) 定制外观
2017/05/02 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
如何使用Pytorch搭建模型
2020/10/26 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
2015新员工试用期工作总结
2014/12/12 职场文书
电影建党伟业观后感
2015/06/01 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP