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

发布时间：2021-02-17 13:12:43

来源：亿速云

阅读：119

作者：Leah

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

首先在view中增加一个meta tag：

然后在我们的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();

}

});

});

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