Magento 2: Wie sende ich Daten mit dem Ajax-Formular in benutzerdefinierter Form?

9

Kann mir jemand erklären, wie ich auf der Magento-2-Seite ein einfaches Formular erstellen kann, um Daten mit Ajax zu senden? Ich habe bereits eine Formular- und Controller-Aktion, die Daten ohne Verwendung von Ajax sendet.

Illia Arefyev
quelle
Ich denke, dieser Link wird Ihnen helfen, hier zu klicken
Pankaj Sharma
Schauen Sie sich meine Antwort an, es könnte mehr helfen als die akzeptierte
LucScu
Fehler bei der Antwort anzeigen> Undefinierte Eigenschaft:> Namespace \ Modulname \ Controller \ Index \ Index \ Interceptor :: $ _ jsonHelper Bitte teilen, um die Antwort zu verbessern
Rohit Chauhan

Antworten:

13

Sie können einfach den folgenden Code in Ihrer HTML-Datei festlegen, um Ajax zu verwenden. Sie müssen Ihre Anpassung im folgenden Code ändern.

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

in Ihrer Controller-Datei execute () -Methode,

<?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;
    } 
Rakesh Jesadiya
quelle
4
Sie können Daten im Controller mit $ this-> getRequest () -> getParam ('customdata1') abrufen.
Rakesh Jesadiya
1
Antwort wird in Skriptantwort erhalten.
Rakesh Jesadiya
2
vollständig: Funktion (Antwort) Hier haben Sie Antwort.
Rakesh Jesadiya
1
Sie müssen die Antwort über $ this -> _ jsonHelper-> jsonEncode (['default_country' => $ country, 'state' => $ state,]) im Controller
Rakesh Jesadiya
1
im obigen Fall sind default_country und state von der Antwort zurückgekehrt
Rakesh Jesadiya
11

Die akzeptierte Antwort ist gut, aber ich denke, sie könnte nützlich sein, um die js-Validierung zu nutzen, die Magento Core bietet. Versuchen Sie also, das folgende js-Skript zu verwenden:

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

Vergessen Sie nicht, dass der Controller eine JSON-Antwort wie folgt zurückgeben muss:

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

return $response;
LucScu
quelle
1
Viel bessere Lösung als die akzeptierte Antwort. Danke Mann
Medina