Comment faire un simple appel ajax dans Magento 2.1.0

10

J'ai ajouté un simple bouton dans l'un de mes fichiers phtml.

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

J'ai ajouté un fichier js personnalisé ("emq.js") à partir d'un module personnalisé (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');
        });
    });
//]]>
});

Lorsque je clique sur le bouton ci-dessus, "cliqué" est imprimé dans la console, c'est-à-dire que jQuery fonctionne correctement.

Voici un fichier contrôleur d'un module personnalisé 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>

Ma question est de savoir comment renvoyer des données de cette méthode de contrôleur, puis y accéder via jQuery, c'est-à-dire comment effectuer un simple appel ajax après avoir cliqué sur ce bouton.

vedu
la source
vedu pouvez-vous s'il vous plaît expliquer houe dois-je ajouter la case à cocher cuctom sur la page de détail du produit.Lorsque je suis coché, je veux ajouter 0,50 $ en prix prodct qui sera mis à jour dans le panier à
Ashwini

Réponses:

17

ci-dessous est l'exemple comment faire cela, veuillez le modifier en fonction de vos besoins.

J'ai utilisé le modèle js pour cela.

L'exemple suivant créera une liste déroulante dans votre fichier phtml en utilisant la fonctionnalité ajax.

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

Dans le contrôleur

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

DANS votre fichier 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 doit être fonction dans votre fichier de bloc, qui vous renvoie l'url

J'espère que ça t'as aidé.

Ekta Puri
la source
Merci pour votre réponse. Pouvez-vous me dire ce que je dois mentionner dans le paramètre url de la méthode $ .ajax. Le frontName de mon contrôleur est une nouvelle.
vedu
modulefrontname / index / news thsi fonctionnera si le chemin de votre contrôleur est [namespace] / [modulename] /Controller/Index/News.php Je préfère passer l'url du fichier modèle qui crée l'url de Block en utilisant $ this-> getUrl
Ekta Puri
oui dans magento 1, j'ai également passé l'url du fichier modèle uniquement. mais dans magento 2, le code jquery dans le fichier modèle ne fonctionne pas.
vedu
J'ai mis à jour ma réponse, il contient du code dans le fichier phtml pour vous charger js, mais vos js devraient être dans le dossier de votre module
Ekta Puri
vous pouvez accéder à l'url dans js en utilisant config.AjaxUrl
Ekta Puri