วิธีการโทร ajax ง่าย ๆ ใน Magento 2.1.0

ฉันได้เพิ่มปุ่มง่ายๆในหนึ่งในไฟล์ phtml ของฉัน

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

ฉันได้เพิ่มไฟล์ js ที่กำหนดเองหนึ่งไฟล์ ("emq.js") จากโมดูลที่กำหนดเอง (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');
        });
    });
//]]>
});

เมื่อฉันคลิกที่ปุ่มด้านบนแล้ว "คลิก" ถูกพิมพ์ในคอนโซลเช่น jQuery ทำงานอย่างถูกต้อง

นี่คือไฟล์ควบคุมจากโมดูลที่กำหนดเอง Ved_Mymodule:

Ved \ MyModule \ ควบคุม \ ดัชนี \ 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 / ส่วนหน้า / routes.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>

คำถามของฉันคือวิธีการส่งคืนข้อมูลจากวิธีการควบคุมนี้แล้วเข้าถึงผ่านทาง jQuery เช่นวิธีการโทร ajax อย่างง่าย ๆ หลังจากที่คลิกปุ่มนั้น

ด้านล่างเป็นตัวอย่างวิธีการทำเช่นนี้โปรดแก้ไขตามความต้องการของคุณ

ฉันใช้เทมเพลต js สำหรับสิ่งนี้

ตัวอย่างต่อไปนี้จะสร้างรายการแบบหล่นลงในไฟล์ phtml ของคุณโดยใช้ฟังก์ชัน ajax

ใน JS ของคุณ

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;
    });

ในตัวควบคุม

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);
        }
    }

ในไฟล์ phtml ของคุณ

<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 ควรทำงานในไฟล์บล็อกของคุณซึ่งจะส่งคืน URL ให้คุณ

หวังว่าจะช่วย