Cách thực hiện cuộc gọi ajax đơn giản trong Magento 2.1.0

Tôi đã thêm một nút đơn giản trong một trong các tệp phtml của mình.

<input type='button' name='emq_zip_btn' class='emq_zip_btn' value='Go'>

Tôi đã thêm một tệp js tùy chỉnh ("emq.js") từ một mô-đun tùy chỉnh (Ved_Mymodule):

require([
    "jquery",
    "jquery/ui"
], function($v){
//<![CDATA[
    $v = jQuery.noConflict();
    $v(document).ready(function() 
    {
        console.log('jquery loaded from emq.js');
        $v(".emq_zip_btn").on('click',function(e)
        {
            console.log('clicked');
        });
    });
//]]>
});

Khi tôi nhấp vào nút ở trên thì "nhấp chuột" được in trong bảng điều khiển tức là jQuery đang hoạt động bình thường.

Đây là tệp điều khiển từ mô-đun tùy chỉnh Ved_Mymodule:

Ved \ Mymodule \ Controller \ Index \ Index.php:

<?php

namespace Ved\Mymodule\Controller\Index;

use Ved\Mymodule\Model\NewsFactory;
use Magento\Framework\App\Action\Action;
use Magento\Framework\App\Action\Context;

class Index extends Action
{
    /**
     * @var \Tutorial\SimpleNews\Model\NewsFactory
     */
    protected $_modelNewsFactory;

    /**
     * @param Context $context
     * @param NewsFactory $modelNewsFactory
     */
    public function __construct(
        Context $context,
        NewsFactory $modelNewsFactory
    ) {
        parent::__construct($context);
        $this->_modelNewsFactory = $modelNewsFactory;
    }

    public function execute()
    {

    }
}

Ved / Mymodule / etc / frontend / Rout.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:noNamespaceSchemaLocation="../../../../../../lib/internal/Magento/Framework/
App/etc/routes.xsd">
    <router id="standard">
        <route id="news" frontName="news">
            <module name="Ved_Mymodule" />
        </route>
    </router>

Câu hỏi của tôi là làm thế nào để trả về dữ liệu từ phương thức điều khiển này và sau đó truy cập nó qua jQuery tức là Cách thực hiện cuộc gọi ajax đơn giản sau khi nhấp vào nút đó.

Dưới đây là ví dụ về cách thực hiện việc này, Vui lòng sửa đổi theo yêu cầu của bạn.

Tôi đã sử dụng mẫu js cho việc này.

Ví dụ sau sẽ tạo trình đơn thả xuống trong tệp phtml của bạn bằng chức năng ajax.

Trong JS của bạn

define([
        'jquery',
        'underscore',
        'mage/template',
        'jquery/list-filter'
        ], function (
            $,
            _,
            template
        ) {
            function main(config, element) {
                var $element = $(element);
var YOUR_URL_HERE = config.AjaxUrl;
                $(document).on('click','yourID_Or_Class',function() {
                        var param = 'ajax=1';
                            $.ajax({
                                showLoader: true,
                                url: YOUR_URL_HERE,
                                data: param,
                                type: "POST",
                                dataType: 'json'
                            }).done(function (data) {
                                $('#test').removeClass('hideme');
                                var html = template('#test', {posts:data}); 
                                $('#test').html(html);
                            });
                    });
            };
        return main;
    });

Trong bộ điều khiển

public function __construct(
        Context $context,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
    ) {

        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct($context);
    }


    public function execute()
    {
        $result = $this->resultJsonFactory->create();
        if ($this->getRequest()->isAjax()) 
        {
            $test=Array
            (
                'Firstname' => 'What is your firstname',
                'Email' => 'What is your emailId',
                'Lastname' => 'What is your lastname',
                'Country' => 'Your Country'
            );
            return $result->setData($test);
        }
    }

IN tập tin phtml của bạn

<style>  
.hideme{display:none;}
</style>
<script type="text/x-magento-init">
        {
            "*": {
                "[Namespace]_[Modulename]/js/YOURFILE": {
                    "AjaxUrl": "<?php echo $block->getAjaxUrl(); ?>",
                }
            }
        }
</script>
<div id='test' class="hideme">
    <select>
      <% _.each(posts, function(text,value) { %>
         <option value="<%= value %>"><%= text %></option>
      <% }) %> 
     </select>
</div>

getAjaxUrl phải là chức năng trong tệp khối của bạn, nó trả lại cho bạn url

Mong rằng sẽ giúp.