Magento 2.1.0 में एक साधारण अजाक्स कॉल कैसे करें

Question

मैंने अपनी एक 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');
        });
    });
//]]>
});

जब मैं उपरोक्त बटन पर क्लिक करता हूं तब "क्लिक किया हुआ" कंसोल में मुद्रित होता है अर्थात jQuery ठीक से काम कर रहा है।

यहाँ एक कस्टम मॉड्यूल Ved_Mymodule से एक नियंत्रक फ़ाइल है:

वेद \ 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()
    {

    }
}

वेद / 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 के माध्यम से एक्सेस किया जाए अर्थात बटन क्लिक करने के बाद एक साधारण अजाक्स कॉल कैसे करें।

Comments

vedu क्या आप कृपया समझा सकते हैं कि मुझे उत्पाद विवरण पृष्ठ पर cuctom चेकबॉक्स जोड़ना चाहिए। जब ​​मैंने चेक किया कि मैं $ 0.50 को प्रोडक्ट मूल्य में जोड़ना चाहता हूं जिसे कार्ट में अपडेट मिलता है

— अश्विनी

Answer 1

नीचे उदाहरण है कि यह कैसे करना है, कृपया अपनी आवश्यकता के अनुसार इसे संशोधित करें।

मैंने इसके लिए js टेम्पलेट का उपयोग किया।

उदाहरण के बाद ajax कार्यक्षमता का उपयोग करके अपनी phtml फ़ाइल में ड्रॉप डाउन बनाएंगे।

अपने जेएस में

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 लौटाता है

उम्मीद है की वो मदद करदे।

Comments

आपके उत्तर के लिए धन्यवाद। क्या आप बता सकते हैं कि मुझे $ .ajax पद्धति के url पैरामीटर में क्या उल्लेख करना चाहिए । मेरे नियंत्रक का नाम समाचार है।

— vedu

यदि आपका कंट्रोलर पथ [नेमस्पेस] / [modulename] / / कंट्रोलर / इंडेक्स / न्यूसेफ है तो मैं मॉड्यूलफ्रंट / इंडेक्स / न्यूज थिसी काम करूंगा। मैं टेम्पलेट फ़ाइल से url पास करना पसंद करता हूं जो $ $ इस का उपयोग करके ब्लॉक के लिए url बनाता है-> getUrl

— Ekta पुरी

हाँ मैगेंटो 1 में, मैं भी केवल टेम्पलेट फ़ाइल से यूआरएल पारित किया। लेकिन Magento में टेम्पलेट फ़ाइल में 2 jquery कोड काम नहीं करता है।

— vedu

मैंने अपने उत्तर को अपडेट कर दिया है कि आपके पास js लोड करने के लिए phtml फ़ाइल में कोड है, लेकिन आपका js आपके मॉड्यूल फ़ोल्डर में होना चाहिए

— एकता पुरी

आप config का उपयोग करके js में url तक पहुँच सकते हैं। AjaxUrl

— एकता पुरी