Magento 2.1.0에서 간단한 아약스 호출을 만드는 방법

내 phtml 파일 중 하나에 간단한 버튼을 추가했습니다.

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

사용자 정의 모듈 (Ved_Mymodule)에서 하나의 사용자 정의 js 파일 ( "emq.js")을 추가했습니다.

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');
        });
    });
//]]>
});

위 버튼을 클릭하면 "clicked"가 콘솔에 인쇄됩니다. 즉, jQuery가 올바르게 작동합니다.

다음은 사용자 지정 모듈 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 / 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를 통해 액세스하는 방법입니다. 즉, 버튼을 클릭 한 후 간단한 아약스 호출을 만드는 방법입니다.

아래는이를 수행하는 방법의 예입니다. 요구 사항에 따라 수정하십시오.

나는 이것을 위해 js 템플릿을 사용했다.

다음 예제는 ajax 기능을 사용하여 phtml 파일에 드롭 다운을 작성합니다.

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을 반환합니다.

희망이 도움이됩니다.