在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 Zip压缩 在线对文件进行压缩的函数
May 26 PHP
使用PHP curl模拟浏览器抓取网站信息
Oct 28 PHP
php求正负数数组中连续元素最大值示例
Apr 11 PHP
ThinkPHP3.1新特性之内容解析输出详解
Jun 19 PHP
图文介绍PHP添加Redis模块及连接
Jul 28 PHP
php+jQuery递归调用POST循环请求示例
Oct 14 PHP
PHP中字符串长度的截取用法示例
Jan 12 PHP
Linux下快速搭建php开发环境
Mar 13 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
Sep 04 PHP
PHP实现的最大正向匹配算法示例
Dec 19 PHP
PHP操作路由器实现方法示例
Apr 27 PHP
Laravel框架处理用户的请求操作详解
Dec 20 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 Memcache 中实现消息队列
2009/11/24 PHP
php绘图中显示不出图片的原因及解决
2014/03/05 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
thinkphp5 加载静态资源路径与常量的方法
2017/12/24 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
JavaScript动态插入script的基本思路及实现函数
2013/11/11 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
javascript中parseInt()函数的定义和用法分析
2014/12/20 Javascript
jQuery中ready事件用法实例
2015/01/19 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
Javascript模仿淘宝信用评价实例(附源码)
2015/11/26 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
webpack实现热更新(实施同步刷新)
2017/07/28 Javascript
inner join 内联与left join 左联的实例代码
2017/09/18 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
angular2 ng2-file-upload上传示例代码
2018/08/23 Javascript
详解vuex 渐进式教程实例代码
2018/11/27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
2019/02/13 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python数据抓取分析的示例代码(python + mongodb)
2017/12/25 Python
安装python时MySQLdb报错的问题描述及解决方法
2018/03/20 Python
聊聊python中的异常嵌套
2020/09/01 Python
荷兰家电销售网站:Welhof
2020/12/08 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
社区党员先进事迹
2014/01/22 职场文书
《大海那边》教学反思
2014/04/09 职场文书
工作表扬信
2015/01/17 职场文书