it-swarm.com.de

AJAX nach Anfrage werden keine Daten gesendet

Ich arbeite an einer Joomla 3.8-Website auf meinem localhost, die von MAMP 5.1 gehostet wird. Ich ändere die Komponente J2Store, die auf F0F basiert. Bitte haben Sie Verständnis dafür, dass ich noch viele dieser Konzepte lerne.

Wir haben eine Datenbank mit Autoteilen, die 4 Eigenschaften haben: "Hersteller" (oder "Marke"), "Modell", "Jahr" und "Motor". Die Website verfügt über vier verschiedene Auswahlmenüs, eines für jede Eigenschaft, die in der angegebenen Reihenfolge ausgewählt werden müssen. Wenn der Benutzer beispielsweise eine Marke auswählt, wird das Modellmenü verfügbar und zeigt nur die Modelle dieses Herstellers an (und auch für die anderen Eigenschaften).

Diese Funktionalität wurde bereits vom vorherigen Entwickler in diesem Projekt implementiert, hat jedoch die unangenehme Eigenschaft, dass jedes Mal, wenn ein ausgewähltes Menü geändert wird, die gesamte Seite neu geladen wird, was einige Zeit in Anspruch nimmt und ärgerlich ist. Ich versuche, AJAX Anforderungen zu implementieren, die den Menüinhalt aktualisieren, ohne die Seite neu zu laden. Mein Ansatz ist es, eine Anforderung zu senden, wenn sich ein Menü ändert, wodurch die Datenbank nach den entsprechenden Optionen im nächsten Menü abgefragt wird. basierend auf den aktuellen Menüoptionen.

Die Schwierigkeit besteht darin, dass ich nicht weiß, wie ich auf die aktuellen Menüoptionen im serverseitigen Code zugreifen kann. Die Logik des alten Codes basiert auf dem Array $ POST [], aber wenn ich den Inhalt des Arrays post während meiner Rückruffunktionen protokolliere, ist er entweder leer oder enthält nicht das, was ich erwarte/benötige.

Die folgende Datei enthält meine serverseitigen Datenbankaufrufe:

/ localhost/my_site/components/com_j2store/models/callback.php

class J2StoreModelCallback extends F0FModel {

    function runCallback($method) {
        switch ($method) {
            case 'getManufacturer':
                $this->getManufacturer();
                break;
            case 'getModel':
                $this->getModel();
                break;
            case 'getManufYear':
                $this->getManufYear();
                break;
            case 'getEngineSize':
                $this->getEngineSize();
                break;
        }
        ...
    }
    ...
    function getModel(){
        // Makes sql query based on the value of $_POST['sel-make']
        ...
    }
    ...
}

Mein Code für eine typische Menüauswahlantwort sieht folgendermaßen aus:

/ localhost/my_site/media/j2store/js/j2store.js

...

jQuery(document).ready(function() {

  jQuery('#sel-make').change(function() {

    // Reset Model, Year and Engine selects.
    disableSelectMenu('model');
    disableSelectMenu('year');
    disableSelectMenu('engine');

    var selection = jQuery('#sel-make').val();

    // If the user cleared their choice, don't do anything else.
    if (selection === '') {
      return;
    }

    var postData = "sel-make=" + selection;

    // Sends an AJAX request which retrieves the correct contents for the Model select.
    // It passes the response to a helper function.
    jQuery.ajax({
            url: '/my_site/index.php?option=com_j2store&view=callback&task=callback&method=getModel', 
            cache: false,
            type: "POST",
            contentType: "application/json",
            data: postData,
            success: function(response){ 
                // Enables the Model select and fills it with the returned array.
                enableSelectMenu('model', response);
            },
            error: function(xhr, textStatus, errorThrown) {
                console.log("error : " + textStatus);
            }
        });
  });
  ...
}
...

Die Ajax-Anforderung erreicht ihr Ziel, behält jedoch nicht die Informationen zur Herstellerauswahl bei. Im Kontext von getModel ist das Post-Array leer und im Kontext der runCallback-Methode ist es leer

Array
(
    [option] => com_j2store
    [view] => callback
    [task] => callback
    [method] => getModel
    [Itemid] => 
)

der Datenparameter, den ich in meine Anfrage eingegeben habe, ist nicht enthalten. Wie kann ich die Menüauswahl (über den Controller) über die Anforderung AJAX=) an das Modell senden? Gibt es eine bessere Möglichkeit, über den serverseitigen Code auf diesen Inhalt zuzugreifen?

Ich weiß nicht, ob ich gerade nicht verstehe, wie eine Post-Anfrage richtig gesendet wird, oder ob diese Art von Anfrage in diesem Szenario einfach nicht zulässig ist.

4
William

Erstens, da Sie nur einen zusätzlichen Schlüssel + Wert senden möchten, können Sie diesen in die URL des Ajax-Aufrufs wie folgt einfügen:

url: '/my_site/index.php?option=com_j2store&view=callback&task=callback&method=getModel&Itemid=' + selection,

Und ich verstehe nicht warum, aber wenn Sie den gewählten Wert mit der Taste (sel-make) senden möchten, dann:

url: '/my_site/index.php?option=com_j2store&view=callback&task=callback&method=getModel&sel-make=' + selection,

Wenn Sie die in der URL enthaltenen Daten senden, können Sie einfach // data: postData auskommentieren. Diese Leitung wird in diesem Fall eigentlich nicht benötigt.

In Ihrer runCallback () -Funktion haben Sie jetzt die gewünschten Daten, und Sie können dies beispielsweise mit den folgenden Angaben tun:

function runCallback($method) {

        $app = JFactory::getApplication ();
        $rawDataPost = $app->input->getArray($_POST);
        // if you sent the value in ajax as Itemid:
        $Itemid = $rawDataPost['Itemid'];
        // if you sent it as sel-make:
        $selection = $rawDataPost['sel-make'];
        // then here all of your other things in this function...
}

Dies ist nur ein einfacher Weg, wie Sie dies erreichen können. (meine Site auf meinem localhost hat momentan ein Codierungsproblem, daher kann ich das oben genannte nicht versuchen, aber ich sehe kein Problem damit, die Itemid auf diese Weise über den Controller an dieses Modell zu senden.) (Update: Jetzt habe ich das und es getestet funktioniert).

Und ich habe fast vergessen, dass, wenn Sie die Daten lieber so senden möchten, wie Sie sie ursprünglich formuliert haben, Sie die Formatierung einfach so ändern müssen und sie durchkommen:

var postData = {'Itemid' : selection};
3
Zollie