在Laravel中使用AJAX动态刷新部分页面

相信大家都很熟悉AJAX，有很多不同的Javascript框架可以用来快速实现AJAX功能。所以今天，让我们来看看如何在使用PHP Frameworks的网站中使用AJAX来刷新页面的一小部分。

这里我使用jQuery Laravel(当然，如果使用其他框架，基本概念将保持不变)。如图所示，假设我们制作一个页面来管理客户的茶叶消费：

我们想做一个模块，为每一个新的茶叶消费动态添加一个消费选择区域，也就是点击【添加消费】后，会动态添加一个新的茶叶消费区域：

此外，当您单击删除消费时，消费区域将被动态删除。

为了实现这个功能，我们的基本思想如下(MVC模式):

使用AJAX POST调用来调用控制器的函数

控制器在我们需要的视图中返回HTML代码片段

调用AJAX回调函数，将HTML代码片段动态插入页面

首先，让我们创建我们的js文件。在这里，我创建了一个名为my-Ajax-add-tea-consume . js的新文件，并将其放在/public/js文件夹中。在视图模板中，我们使用脚本/脚本调用：

！DOCTYPE htmlhtml lang='en '.身体.输入类型='隐藏'名称='order_id '值=' { $ order-id } } Div类=' tea-consume ' Div类=' card ' id=' tea-card-{ $ tea _ consume-id } } Div类=' card-header ' spanta consume/span按钮类型='button '删除此消费/按钮输入类型='隐藏'值=' { $ tea _ consume-id } } '/Div类='card-block '！-其他输入-/div/div/div button type=' button ' name=' BTN-add ' new consumption/button script src=' http :/js/my-AJAX-add-tea-consumption . js '/script/body/Html因为Laravel的Middleware会自动检查CSRF，所以我们在使用POST、DELETE等方法的时候需要全局设置Ajax头，这样每次发送Ajax的时候，就会自动发送相应的csrf token，只有在Laravel检查过之后才会调用相应的Controller函数因此，我们首先在视图中添加一个元标签:

meta name=' csrf-token ' content=' { { csrf _ token()} } '然后在我们的my-Ajax-add-tea-consume . js中添加：

$.AJaxsetup({ headers : { ' X-CSRF-TOKEN ' : $(' meta[name=' csrf-TOKEN ']')。attr(' content ')} })；就这样。然后我们开始添加ajax函数(首先，添加模块):

$('button[name='btn-add']')。点击(function(){//route format :/orders/{ id }/add-tea-consume $。post('/orders/' $(' input[name=' order _ id ']')。val()'/add-tea-consume ')，function(html ) { $('。茶叶消费”)。追加(html)；});});看似很简单，但有几个地方需要注意：

button的类型必须写成Button，默认为默认类型=“submit”，这样按钮一点击页面就会跳转。

帖子的url用laravel中的route填充(我们将在后面的routes中描述)

回调函数中的数据html是使用控制器函数中的视图返回的html代码

好了，现在我们的美元。post()调用将在后台以/orders/{ id }/add-tea-consume的形式访问路径，因此我们在\routes\web.php中添加我们的路径名和处理方法：

route : post('/orders/{ id }/add-tea-consume '，'[email protected]_ tea _ consume ')；也就是说，我们希望控制器中的add _ tea _ consumption函数，即RoomOrdersController，能够处理我们的ajax请求。让我们来看看这个函数有什么：

？PHP//RoomOrderScontroller . phpnamespace App \ Http \ Controllers；使用照明\ Http \ Request使用App \ RoomOrder使用应用程序\房间教学消费；类RoomOrdersController扩展了控制器{ 0./** *返回html格式的视图片段* * @ param $ order _ id * @ Return \ light \ Http \ Response */public function add _ tea _ consume($ order _ id){ $ consume=roomtaeconsumption : create([' room _ order _ id '=$ order _ id/*更多字段省略*/])；返回视图(' partials.tea _ consumption带([' tea _ consume '=$ consume/*更多字段省略*/])；}}其实和我们控制器中的常用函数没什么区别，因为我们需要返回的是html代码，而Laravel在调用view()的时候已经为我们生成了。

因此，$('。茶叶消费”)。ajax调用成功返回时追加(html );视图生成的Html代码将被插入到我们指定的DOM中，从而动态刷新页面。

值得注意的是，如果你发现你的ajax调用返回了一个内部500错误，首先检查你的csrf是否已经设置好了。如果确认没有问题，则检查您的视图模板文件。如果其中有错误，则无法返回html，从而导致错误。

删除一个模块，几乎是一样的，但是需要注意的是，我们的监听器不能被注入。单击()，因为当模块被删除时，侦听器会被注入。click()将失败，因此我们需要使用。父级的on()函数：

('.茶叶消费”)。on('click '，' #my-button '，function() { $。ajax({ method: 'DELETE '，URL : '/teas/consume/' $(' this ')。下一步(“输入”)。val() '/delete '，success : function(id){ var sel=$(' # tea-card-' id)；sel . remove()；} });});AJAX需要小心，因为错误很难调试，所以开发的时候一定要注意，有问题的时候参考相关API。

页面的以上部分是由Laravel中的AJAX动态刷新的，是边肖与大家分享的全部内容。希望能给大家一个参考，多多支持我们。