Cara membuat panggilan ajax sederhana di Magento 2.1.0


10

Saya telah menambahkan tombol sederhana di salah satu file phtml saya.

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

Saya telah menambahkan satu file js khusus ("emq.js") dari modul khusus (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');
        });
    });
//]]>
});

Ketika saya mengklik tombol di atas maka "diklik" dicetak di konsol yaitu jQuery bekerja dengan baik.

Ini adalah file pengontrol dari modul kustom 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>

Pertanyaan saya adalah bagaimana mengembalikan data dari metode pengontrol ini dan kemudian mengaksesnya melalui jQuery yaitu Bagaimana membuat panggilan ajax sederhana setelah tombol itu diklik.


Anda dapat tolong jelaskan cangkul saya harus menambahkan kotak centang cuctom pada halaman detail produk. ketika diperiksa saya ingin menambahkan $ 0,50 dalam harga prodct yang mendapatkan pembaruan dalam keranjang untuk
Ashwini

Jawaban:


18

di bawah ini adalah contoh cara melakukan ini, Silakan modifikasi sesuai dengan kebutuhan Anda.

Saya menggunakan template js untuk ini.

Contoh berikut akan membuat drop down di file phtml Anda menggunakan fungsionalitas ajax.

Di JS Anda

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

Di Kontroler

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

DALAM file phtml Anda

<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 harus berfungsi dalam file blok Anda, yang mengembalikan Anda url

Semoga itu bisa membantu.


Terima kasih atas jawaban Anda. Dapatkah Anda memberi tahu saya apa yang harus saya sebutkan dalam parameter url dari metode $ .ajax. Nama depan pengontrol saya adalah berita.
vedu

modulefrontname / index / news ini akan berfungsi jika path controller Anda adalah [namespace] / [modulename] /Controller/Index/News.php Saya lebih suka meneruskan url dari file template yang membuat url dari Block menggunakan $ this-> getUrl
Ekta Puri

ya di magento 1, saya juga melewati url dari file template saja. tetapi dalam magento 2 kode jquery dalam file template tidak berfungsi.
vedu

Saya memperbarui jawaban saya memiliki kode dalam file phtml untuk memuat Anda js, tetapi js Anda harus di folder modul Anda
Ekta Puri

Anda dapat mengakses url dalam js dengan menggunakan config.AjaxUrl
Ekta Puri
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.