Ajax

Ajax là một công nghệ dựa trên JavaScript cho phép một trang web tìm nạp thông tin mới và tự trình bày mà không cần làm mới trang. Ý tưởng đằng sau Ajax là làm cho trang web phản hồi nhanh hơn và tương tác hơn theo quan điểm của người dùng.

Frontend

SkillDo nhận diện ajax callback của bạn thông qua params action

Sử dụng Ajax của Jquery để gọi:

$(document).on('click', '.element', function(event) {
    let data = {
        action: 'TestAjax::actionName',
    };
    $.post(ajax, data, function(data) {}, 'json').done(function(response) {
        SkilldoMessage.response(response)
    });
});

Trong version 7 cms có tích hợp thêm axios để gọi ajax hay các cuộc gọi api

$(document).on('click', '.element', function(event) {
    let data = {
        action: 'TestAjax::actionName',
    };
    request.post(ajax, data).then(function(response) {
        SkilldoMessage.response(response)
    })
});

Trong 2 ví dụ trên bạn thấy :

• biến ajax là url gọi ajax chung của cms
• TestAjax::actionName là callback ở backend sẽ xử lý dữ liệu và trả data về với dạng json
• biến request là axios đã được cms cấu hình để khi sử dụng sẽ tự động gửi thêm csrf token nếu bạn không muốn sử dụng cấu hình mặc định của cms bạn có thể tạo 1 cấu hình khác và gọi với cấu hình của bạn, bạn có thể xem cấu hình mặc định ở file http.js

Trong một số trường hợp ngôn ngữ giữa admin và client sẽ không giống nhau ví dụ như admin đang sử dụng ngôn ngữ tiếng việt và client đang sử dụng tiếng anh. Để gọi chính xác ngôn ngữ bạn cần bạn có thể thêm params "_is_lang" vào data với giá trị là theme nếu muốn lấy ngôn ngữ theo client và admin nếu lấy theo admin

$(document).on('click', '.element', function(event) {
    let data = {
        action: 'TestAjax::actionName',
        _is_lang: 'theme'
    };
    request.post(ajax, data).then(function(response) {
        SkilldoMessage.response(response)
    })
});

Backend

Function callback

Ở Backend bạn cần tạo function callback mà bạn đã gán vào action ở phía frontend

Example

use SkillDo\Http\Request
class TestAjax {
    #[NoReturn]
    static function actionName(Request $request, $model): void
    {
        if($request->isMethod('post')) {
        
            response()->success('thành công!');
        }
        
        response()->error('không thành công');
    }
}

Registration ajax

Sau khi tạo function callback bạn phải đăng ký với cms đây là function callback của ajax

Ajax::client

Method Ajax::client sẽ đăng ký ajax với không có điều kiện nào

Ajax::client('TestAjax::actionName')

Ajax::login

Method Ajax::login sẽ đăng ký ajax với điều kiện người dùng đã đăng nhập

Ajax::login('TestAjax::actionName')

Ajax::admin

Method Ajax::admin sẽ đăng ký ajax với điều kiện người dùng đã đăng nhập và người dùng naày phải có quyền login admin

Ajax::admin('TestAjax::actionName')