Ajax là một phần không thể thiếu khi các bạn muốn xây dựng các chức năng mà không muốn load lại trang. Việc sử dụng Ajax trong Magento tương đối giống với cách sử dụng thông thường. Trong bài viết này mình sẽ hướng dẫn các bạn sử dụng Ajax trong Magento 2 một cách chi tiết nhất.
Tham khảo: Sử dụng Ajax với Knockout Js trong Magento 2
Khai báo Ajax trong templates
Trong template của bạn hãy sử dụng require js để sử dụng Jquery và ajax.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<div class="parent-form"> <div class="form-items"> <input type="text" id="search-example" placeholder="Nhập từ khóa và nhấn Enter"> <input type="submit" id="submit-button" value="Tìm kiếm"> </div> </div> <script type="text/javascript"> require(["jquery", "mage/url"],function($, urlBuilder) { $(document).ready(function() { $('#submit-button').click(function(){ var url = urlBuilder.build('helloworld/ajax/index'); $.ajax({ url: url, type: 'POST', dataType: 'json', data: { data1: 'test1', data2: 'test2', }, success: function(response) { console.log(response); }, error: function (xhr, status, errorThrown) { console.log('Error happens. Try again.'); } }); }); }); }); </script> |
Như bạn thấy thì cách sử dụng Ajax cũng tương tự như cách thông thường, với $.post() và $.get() cũng tương tự nhé. Lưu ý ở đây để lấy URL của controller hãy sử dụng “mage/url” nhé.
Lấy dữ liệu Ajax gửi sang từ Controller
Sau đó ở Controller nơi mà dữ liệu được gửi sang các bạn lấy dữ liệu được gửi sang sau đó xử lý và trả kết quả về cho Ajax như bình thường thôi.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?php namespace ViMagento\HelloWorld\Controller\Ajax; class Index extends \Magento\Framework\App\Action\Action { protected $json; protected $resultJsonFactory; public function __construct( \Magento\Framework\App\Action\Context $context, \Magento\Framework\Serialize\Serializer\Json $json, \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory ) { $this->json = $json; $this->resultJsonFactory = $resultJsonFactory; parent::__construct($context); } public function execute() { //lấy dữ liệu từ ajax gửi sang $response = $this->getRequest()->getParams(); /** @var \Magento\Framework\Controller\Result\Json $resultJson */ $resultJson = $this->resultJsonFactory->create(); // chuyển kết quả về dạng object json và trả về cho ajax return $resultJson->setData($response); } } |
Kết luận
Trong bài viết tôi đã hướng dẫn các bạn cách sử dụng Ajax trong Magento 2. Hy vọng bài viết sẽ hữu ích đối với các bạn.