Laravel中使用AJAX動態重新整理部分頁面

阿新 • • 發佈：2019-01-15

AJAX相信大家都不陌生，有很多不同的Javascript Frameworks可以用來快速實現AJAX功能。那麼今天我們一起來看一下如何在使用了PHP Frameworks的網站中使用AJAX來重新整理頁面的一小部分。

這裡我使用的是jQuery + Laravel（當然如果使用了其他框架，基本的概念也是不變的）。如圖，假設我們製作了一個頁面來管理客戶的茶葉消耗：
tea consumption block

我們想製作一個模組來動態為每一個新的茶葉消耗增加一個消耗選擇區，即點選新增消耗後，會動態增加一個新的茶葉消耗區域：
add tea consumption dynamically

另外，當點選刪除該消耗時，該消耗區域會動態刪除。

要實現這樣的功能，我們的基本思路如下（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', '[email protected]_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動態重新整理部分頁面

Laravel中使用AJAX動態重新整理部分頁面

js中 ajax動態新增節點無法觸發點選事件

metisMenu.js動態側邊導航的實現（ajax動態渲染部分導航）

laravel之ajax無重新整理分頁

SSH通過ajax向action中傳值以及ajax非同步重新整理頁面

SSM中Ajax實現非同步重新整理,前端頁面綁值。

定時請求php 後臺 AJAX 請求，在頁面中倒計時，和顯示重新整理時間

Ajax實現動態重新整理頁面（get）

jsp頁面中，動態調用系統時間的實現

筆記-返回到前一個頁面時顯示前一個頁面中ajax獲取的數據

工作總結頁面通過ajax 動態綁定列表頁面列表每一項的事件事件觸發多次

salesforce零基礎學習（八十六）Ajax Toolkit （VF頁面中使用及javascript action使用）

ajax 動態獲取數據庫中的值

C#利用phantomJS抓取AjAX動態頁面

分享Laravel中blade頁面更改沒有及時顯示在頁面的問題解決方案

vue專案中使用Echarts 動態更改圖表資料， Vue 折線圖、柱狀圖等圖表動態重新整理，

Java架構-SOA中springmvc中restful服務動態重新整理token資訊

vue-router中關於元件複用頁面不重新整理的問題

MVC使用ajax非同步重新整理時怎樣輸出從後臺中傳過來的JSON資料

scrapy由淺入深(三) selenium模擬爬取ajax動態頁面(智聯招聘)

Laravel中使用AJAX動態重新整理部分頁面

相關推薦