怎么在Laravel中利用AJAX動(dòng)態(tài)刷新部分頁(yè)面

發(fā)布時(shí)間：2021-02-17 13:12:43

來(lái)源：億速云

閱讀：119

作者：Leah

怎么在Laravel中利用AJAX動(dòng)態(tài)刷新部分頁(yè)面？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。

首先在view中增加一個(gè)meta tag：

然后在我們的my-ajax-add-tea-consumption.js中，加上：$.ajaxSetup({

headers:?{

'X-CSRF-TOKEN':?$('meta[name="csrf-token"]').attr('content')

}

});

這樣就可以了。然后我們開(kāi)始添加ajax函數(shù)(首先是增加模塊)：$('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?);

});

});

看起來(lái)很簡(jiǎn)單吧，但是要注意的幾個(gè)地方有：

Button的type一定要寫(xiě)為button，而缺省的話默認(rèn)type=”submit”，這樣一旦button被點(diǎn)擊頁(yè)面就會(huì)跳轉(zhuǎn)。

post的url我們填的是laravel中的route(稍后在routes中我們還會(huì)敘述)

callback function中的數(shù)據(jù)html是由controller函數(shù)中使用某個(gè)view所返回的html代碼

好了，那么現(xiàn)在我們的$.post() call會(huì)后臺(tái)訪問(wèn)/orders/{id}/add-tea-consumption這樣形式的路徑，所以我們?cè)赲routes\web.php中加上我們的路徑名和處理方式：route::post('/orders/{id}/add-tea-consumption',?'RoomOrdersController@add_tea_consumption');

即我們希望由RoomOrdersController這個(gè)控制器中的add_tea_consumption函數(shù)來(lái)處理我們的ajax請(qǐng)求。那么我們一起來(lái)看一下這個(gè)函數(shù)到底有些什么內(nèi)容：<?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?*/

]);

}

}

其實(shí)跟平時(shí)我們controller中的函數(shù)并沒(méi)有什么區(qū)別，因?yàn)槲覀冃枰祷氐谋緛?lái)就是html代碼，而調(diào)用view()的時(shí)候，Laravel已經(jīng)幫我們生成好了。

這樣一來(lái)，當(dāng)ajax call成功返回時(shí)，$('.tea-consumption').append( html );就會(huì)將view生成的html代碼插入我們指定的DOM中，從而動(dòng)態(tài)刷新頁(yè)面。

值得注意的是，如果你發(fā)現(xiàn)你的ajax call返回internal 500錯(cuò)誤，那么首先請(qǐng)檢查你的csrf是否已經(jīng)設(shè)置好，如果確認(rèn)沒(méi)有問(wèn)題，那么請(qǐng)檢查你的view template文件，只要其中有錯(cuò)誤，那么就無(wú)法返回html，從而造成錯(cuò)誤。

要?jiǎng)h除模塊，其實(shí)是差不多的，但是要注意的是，我們的listener不能使用.click()來(lái)注入，因?yàn)楫?dāng)模塊被刪除后，.click()注入的listener就會(huì)失效，我們需要使用parent的.on()函數(shù)：('.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();

}

});

});

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。

總結(jié)

以上是生活随笔為你收集整理的laravel ajax ip,怎么在Laravel中利用AJAX动态刷新部分页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。