Magento 2: Làm cách nào để gửi dữ liệu bằng biểu mẫu Ajax ở dạng tùy chỉnh?

Ai đó có thể giải thích cho tôi cách tôi có thể tạo một biểu mẫu đơn giản trên trang Magento-2 để gửi dữ liệu bằng Ajax không? Tôi đã có một biểu mẫu và hành động điều khiển, gửi dữ liệu mà không cần sử dụng ajax.

Bạn chỉ có thể đặt dưới mã trong tập tin phtml bạn để sử dụng ajax, bạn phải thay đổi bạn customurl ở bên dưới mã,

<script type="text/javascript">
    require(["jquery"],function($) {
        $(document).ready(function() {
            var customurl = "<?php echo $this->getUrl().'frontname/index/index'?>";
            $.ajax({
                url: customurl,
                type: 'POST',
                dataType: 'json',
                data: {
                    customdata1: 'test1',
                    customdata2: 'test2',
                },
            complete: function(response) {             
                country = response.responseJSON.default_country;
                state = response.responseJSON.state;         
                console.log(state+' '+country);   
                },
                error: function (xhr, status, errorThrown) {
                    console.log('Error happens. Try again.');
                }
            });
        });
    });
</script>

bên trong phương thức tệp điều khiển () của bạn

<?php
 use Magento\Framework\Controller\ResultFactory;
 public function execute()
    {
        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);

        $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
        $response->setHeader('Content-type', 'text/plain');
        $country = 'india';
        $state = 'gujarat';
        $response->setContents(
            $this->_jsonHelper->jsonEncode(
                [
                    'default_country' => $country,
                    'state' => $state,
                ]
            )
        );
        return $response;
    } 

Câu trả lời được chấp nhận là tốt, nhưng tôi nghĩ có thể hữu ích khi tận dụng xác nhận js mà lõi magento cung cấp. Vì vậy, hãy thử sử dụng tập lệnh js bên dưới:

<script type="text/javascript">
require([
    "jquery",
    "mage/mage"
],function($) {
    $(document).ready(function() {
        $('#form_id').mage(
            'validation',
            { 
                submitHandler: function(form) {
                    $.ajax({
                        url: "url to module/controller/action",
                        data: $('#form_id').serialize(),
                        type: 'POST',
                        dataType: 'json',
                        beforeSend: function() {
                            // show some loading icon
                        },
                        success: function(data, status, xhr) {
                            // data contains your controller response
                        },
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                            console.log(errorThrown);
                        }
                    });
                }
            }
        );
    });
});
</script>

Đừng quên rằng bộ điều khiển phải trả về phản hồi JSON như:

$response = $this->resultFactory
    ->create(\Magento\Framework\Controller\ResultFactory::TYPE_JSON)
    ->setData([
        'status'  => "ok",
        'message' => "form submitted correctly"
    ]);

return $response;