Magento 2: कस्टम रूप में अजाक्स फॉर्म का उपयोग करके डेटा कैसे भेजें?

Question

क्या कोई मुझे समझा सकता है कि मैं अजाक्स का उपयोग करके डेटा भेजने के लिए मैगेंटो -2 पेज पर एक सरल फॉर्म कैसे बना सकता हूं? मेरे पास पहले से ही एक फॉर्म और नियंत्रक कार्रवाई है, जो कि अजाक्स का उपयोग किए बिना डेटा भेजती है।

Comments

मुझे लगता है कि यह लिंक आपको यहां क्लिक

— पंकज शर्मा

मेरे उत्तर को देखो, यह तब और अधिक मदद कर सकता है

— ल्यूकसु

प्रतिक्रिया में त्रुटि दिखाते हुए> अनिर्धारित संपत्ति:> नामस्थान \ modulename \ नियंत्रक \ सूचकांक \ सूचकांक \ अवरोधक :: $ _ jsonHelper कृपया उत्तर को बेहतर बनाने के लिए साझा करें

— रोहित चौहान

Answer 1

आप अभी ajax का उपयोग करने के लिए अपनी phtml फ़ाइल में कोड नीचे सेट कर सकते हैं, आपको अपने कस्टमर को नीचे दिए गए कोड में बदलना होगा ,

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

अपने नियंत्रक फ़ाइल के अंदर निष्पादित () विधि,

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

Comments

आप इस $ का उपयोग कर नियंत्रक में डेटा प्राप्त कर सकते हैं-> getRequest () -> getParam ('customdata1');

— राकेश जेसादिया

स्क्रिप्ट प्रतिक्रिया में प्रतिक्रिया मिल रही है।

— राकेश जेसादिया

पूर्ण: फ़ंक्शन (प्रतिक्रिया) यहां आपको प्रतिक्रिया मिली है।

— राकेश जेसादिया

आपको इस से ऊपर $ -> _ jsonHelper-> jsonEncode (['default_country' => $ देश, 'राज्य' => $ राज्य,]) में कोड

— सेट करना होगा

उपरोक्त मामले में default_country और राज्य प्रतिक्रिया से वापस आ रहे हैं

— राकेश जेसादिया

Answer 2

स्वीकृत जवाब अच्छा है, लेकिन मुझे लगता है कि उपयोगी हो सकता है कि जेएस सत्यापन का लाभ उठाएं जो मैगेंटो कोर प्रदान करता है। इसलिए, 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;

Comments

स्वीकृत उत्तर की तुलना में बेहतर समाधान। धन्यवाद आदमी

— मदीना