Magento 2.1.0'da basit bir ajax çağrısı nasıl yapılır


11

Phtml dosyamdan birine basit bir düğme ekledim.

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

Özel bir modülden (Ved_Mymodule) bir özel js dosyası ("emq.js") ekledim:

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

Yukarıdaki düğmeye tıkladığımda "tıklandı" konsolda yazdırılıyor yani jQuery düzgün çalışıyor.

Özel bir Ved_Mymodule modülünden bir denetleyici dosyası:

Ved \ MyModule \ Kontrolör \ Endeksi \ 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 / kullanıcı arayüzü / 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>

Benim sorum bu denetleyici yönteminden bir veri döndürmek ve daha sonra jQuery yani o düğmeye tıklandıktan sonra basit bir ajax çağrısı yapmak nasıl erişmek.


Vedu Eğer ben sepetinde güncelleştirme olsun hangi prodct fiyatına 0,50 $ eklemek istediğiniz işaretli Ben ürün detay page.when üzerinde cuctom onay kutusunu eklemek gerekir çapayı açıklamak memnun edebilirim
Ashwini

Yanıtlar:


19

Aşağıda bunun nasıl yapılacağı, lütfen ihtiyacınıza göre değiştirin.

Bunun için js şablonu kullandım.

Aşağıdaki örnek, ajax işlevselliğini kullanarak phtml dosyanızda açılır liste oluşturacaktır.

JS'nizde

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

Denetleyicide

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 dosyanızda

<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, blok dosyanızda size url döndüren işlev olmalıdır

Umarım yardımcı olur.


Cevabınız için teşekkür ederim. $ .Ajax yönteminin url parametresinde nelerden bahsetmem gerektiğini söyleyebilir misiniz ? Denetleyicimin ön adı haber.
vedu

modulefrontname / index / news Bu, denetleyici yolunuz [ad alanı] / [modulename] /Controller/Index/News.php ise, URL'yi $ this-> getUrl
Ekta

evet eflatun 1, ben de sadece şablon dosyasından url geçti. ancak magento 2'de jquery kodu şablon dosyasında çalışmıyor.
vedu

Cevabımı güncelledim, js yüklemek için phtml dosyasında kodu var, ama js modül klasörünüzde olmalı
Ekta Puri

url'ye js içindeki config.AjaxUrl
Ekta Puri
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.