您好,登录后才能下订单哦!
怎么在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(); } }); });
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。