怎么在Laravel中利用AJAX动态刷新部分页面

发布时间:2021-02-17 13:12:43 作者:Leah
来源:亿速云 阅读:297

怎么在Laravel中利用AJAX动态刷新部分页面?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

首先在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();
  }
 });
});

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. 怎么在vue.js中利用echarts动态刷新数据
  2. 如何在jQuery中利用ajax将数据赋值给页面

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

laravel ajax

上一篇:如何在tp5框架中使用cookie加密算法实现一个登录功能

下一篇:PHP中实现WebSocket 协议的原理是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》