Magento 2: Bagaimana cara mengirim data menggunakan formulir Ajax dalam formulir khusus?


11

Adakah yang bisa menjelaskan bagaimana cara membuat formulir sederhana di halaman Magento-2 untuk mengirim data menggunakan Ajax? Saya sudah memiliki aksi form dan controller, yang mengirim data tanpa menggunakan ajax.


Saya pikir tautan ini akan membantu Anda mengklik di sini
Pankaj Sharma

lihat jawaban saya, itu bisa membantu lebih dari yang diterima
LucScu

Menunjukkan kesalahan respon> properti Undefined:> namespace \ modulename \ Pengendali \ Indeks \ Indeks \ Interceptor :: $ _ jsonHelper Silahkan share untuk meningkatkan jawabannya
Rohit Chauhan

Jawaban:


15

Anda bisa mengatur kode di bawah ini dalam file phtml Anda untuk menggunakan ajax, Anda harus mengubah customurl Anda di dalam kode di bawah ini,

<script type="text/javascript">
    require(["jquery"],function($) {
        $(document).ready(function() {
            var customurl = "<?php echo $this->getUrl().'frontname/index/index'?>";
            $.ajax({
                url: customurl,
                type: 'POST',
                dataType: 'json',
                data: {
                    customdata1: 'test1',
                    customdata2: 'test2',
                },
            complete: function(response) {             
                country = response.responseJSON.default_country;
                state = response.responseJSON.state;         
                console.log(state+' '+country);   
                },
                error: function (xhr, status, errorThrown) {
                    console.log('Error happens. Try again.');
                }
            });
        });
    });
</script>

di dalam file controller Anda jalankan metode () ,

<?php
 use Magento\Framework\Controller\ResultFactory;
 public function execute()
    {
        $resultPage = $this->resultFactory->create(ResultFactory::TYPE_PAGE);

        $response = $this->resultFactory->create(ResultFactory::TYPE_RAW);
        $response->setHeader('Content-type', 'text/plain');
        $country = 'india';
        $state = 'gujarat';
        $response->setContents(
            $this->_jsonHelper->jsonEncode(
                [
                    'default_country' => $country,
                    'state' => $state,
                ]
            )
        );
        return $response;
    } 

4
Anda bisa mendapatkan data dalam pengontrol menggunakan $ this-> getRequest () -> getParam ('customdata1');
Rakesh Jesadiya

1
respons diterima dalam respons skrip.
Rakesh Jesadiya

2
complete: function (response) di sini Anda sudah mendapat respons.
Rakesh Jesadiya

1
Anda harus mengatur respons di atas $ this -> _ jsonHelper-> jsonEncode (['default_country' => $ country, 'state' => $ state,]) kode di controller
Rakesh Jesadiya

1
dalam kasus di atas default_country dan status dikembalikan dari respons
Rakesh Jesadiya

12

Jawaban yang diterima itu baik, tetapi saya pikir bisa bermanfaat memanfaatkan validasi js yang ditawarkan magento core. Jadi, coba gunakan skrip js di bawah ini:

<script type="text/javascript">
require([
    "jquery",
    "mage/mage"
],function($) {
    $(document).ready(function() {
        $('#form_id').mage(
            'validation',
            { 
                submitHandler: function(form) {
                    $.ajax({
                        url: "url to module/controller/action",
                        data: $('#form_id').serialize(),
                        type: 'POST',
                        dataType: 'json',
                        beforeSend: function() {
                            // show some loading icon
                        },
                        success: function(data, status, xhr) {
                            // data contains your controller response
                        },
                        error: function (xhr, status, errorThrown) {
                            console.log('Error happens. Try again.');
                            console.log(errorThrown);
                        }
                    });
                }
            }
        );
    });
});
</script>

Jangan lupa bahwa controller harus mengembalikan respons JSON seperti:

$response = $this->resultFactory
    ->create(\Magento\Framework\Controller\ResultFactory::TYPE_JSON)
    ->setData([
        'status'  => "ok",
        'message' => "form submitted correctly"
    ]);

return $response;

1
Solusi yang jauh lebih baik daripada jawaban yang diterima. Terima kasih
kawan
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.