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) {
SkillDoHelper.messages.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) {
SkillDoHelper.messages.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 ở filehttp.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) {
SkillDoHelper.messages.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')