在Laravel中實現使用AJAX動態重新整理部分頁面
AJAX相信大家都不陌生，有很多不同的Javascript Frameworks可以用來快速實現AJAX功能。那麼今天我們一起來看一下如何在使用了PHP Frameworks的網站中使用AJAX來重新整理頁面的一小部分。
這裡我使用的是jQuery + Laravel（當然如果使用了其他框架，基本的概念也是不變的）。如圖，假設我們製作了一個頁面來管理客戶的茶葉消耗：
我們想製作一個模組來動態為每一個新的茶葉消耗增加一個消耗選擇區，即點選新增消耗後，會動態增加一個新的茶葉消耗區域：
另外，當點選刪除該消耗時，該消耗區域會動態刪除。
要實現這樣的功能，我們的基本思路如下（MVC Pattern）：
使用AJAX POST call來呼叫Controller的函式
Controller返回我們所需的View中的HTML程式碼片段
呼叫AJAX callback函式動態將HTML程式碼片段插入到頁面中
那麼首先我們先建立我們的js檔案，在這裡我新建了一個叫my-ajax-add-tea-consumption.js的檔案，並放在了/public/js資料夾中。我們在view模板中使用<script></script>呼叫：
<!DOCTYPE html>
<html lang="en">
...
<body>
...
<input type="hidden" name="order_id" value="{{ $order->id }}">
<div class="tea-consumption">
<div class="card" id="tea-card-{{ $tea_consumption->id }}>
<div class="card-header">
<span>茶葉消耗</span>
<button type="button">刪除該消耗</button>
<input type="hidden" value="{{ $tea_consumption->id }}">
</div>
<div class="card-block">
<!-- 其他inputs -->
</div>
</div>
</div>
<button type="button" name="btn-add">新增消耗</button>
<script src="/js/my-ajax-add-tea-consumption.js"></script>
</body>
</html>
由於 Laravel的Middleware會自動檢查CSRF，所以如果使用POST，DELETE等方法的時候我們需要全域性設定一下AJAX的header，這樣在每次傳送AJAX的時候，都會自動傳送相應的csrf token，只有Laravel檢查與相應session中的token匹配後，才會呼叫相應的Controller函式。所以在我們首先在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();
}
});
});
AJAX需要細心，因為錯誤比較難debug，所以在開發的時候一定要注意，出現問題了多查閱一下相關API。
以上這篇在Laravel中實現使用AJAX動態重新整理部分頁面就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援碼農教程。