Magento 2: วิธีการส่งข้อมูลโดยใช้แบบฟอร์ม Ajax ในรูปแบบที่กำหนดเอง?


11

ใครช่วยอธิบายฉันได้ว่าฉันจะสร้างรูปแบบง่าย ๆ บนหน้า Magento-2 เพื่อส่งข้อมูลโดยใช้ Ajax ได้อย่างไร ฉันมีรูปแบบและการดำเนินการควบคุมที่ส่งข้อมูลโดยไม่ต้องใช้ ajax


ฉันคิดว่าลิงค์นี้จะช่วยให้คุณคลิกที่นี่
Pankaj Sharma

ดูคำตอบของฉันมันสามารถช่วยได้มากกว่าคนที่ได้รับการยอมรับ
LucScu

แสดงข้อผิดพลาดในการตอบกลับ> คุณสมบัติที่ไม่ได้กำหนด:> เนมสเปซ \ modulename \ Controller \ ดัชนี \ ดัชนี \ Interceptor :: $ _ jsonHelper กรุณาแบ่งปันเพื่อปรับปรุงคำตอบ
Rohit Chauhan

คำตอบ:


16

คุณสามารถตั้งรหัสด้านล่างในไฟล์ phtml ของคุณเพื่อใช้ ajax, คุณต้องเปลี่ยนcustomurlของคุณในโค้ดด้านล่าง,

<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>

ในไฟล์ controller ของคุณexecute ()วิธีการ

<?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
คุณสามารถรับข้อมูลในคอนโทรลเลอร์ได้โดยใช้ $ this-> getRequest () -> getParam ('customdata1');
Rakesh Jesadiya

1
การตอบสนองได้รับในการตอบสนองสคริปต์
Rakesh Jesadiya

2
เสร็จสมบูรณ์: ฟังก์ชั่น (ตอบสนอง) ที่นี่คุณได้รับการตอบสนอง
Rakesh Jesadiya

1
คุณต้องตั้งค่าการตอบกลับในข้างต้น $ this -> _ jsonHelper-> jsonEncode (['default_country' => $ country, 'state' => $ state,]) รหัสในตัวควบคุม
Rakesh Jesadiya

1
ในกรณีข้างต้น default_country และรัฐจะกลับมาจากการตอบสนอง
Rakesh Jesadiya

13

คำตอบที่ยอมรับได้ดี แต่ฉันคิดว่าอาจเป็นประโยชน์ใช้ประโยชน์จากการตรวจสอบ js ที่ magento core เสนอ ดังนั้นให้ลองใช้สคริปต์ js ด้านล่าง:

<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>

อย่าลืมว่าคอนโทรลเลอร์ต้องส่งคืนการตอบสนอง JSON เช่น:

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

return $response;

1
วิธีแก้ปัญหาได้ดีกว่าคำตอบที่ยอมรับ ขอบคุณชาย
เมดินา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.