Userfrosting: Params übergeben, Async-Daten holen

Question

Ich bin ziemlich neu in UF und ich entwickle ein Web-Tool auf der Grundlage der enthaltenen Werkzeuge. Ich lese bereits alle Tutorials sorgfältig und verstehe meist auch die grundlegenden Workflows zwischen PHP, Twig, Slim und JQuery. Obwohl ich in all diesen Technologien kein Profi bin, habe ich zwei Fragen, die mich ein wenig zurückhalten bei der Entwicklung der Dinge, die ich erreichen möchte. Bitte beschuldige mich nicht, wenn die Fragen irgendwie dumm sind.

1.) Was ist der "richtige"/"erwartete" Weg, Parameter während des Neuladens der Seite mit JQuery und nach dem POSTEN einiger Daten an einen Endpunkt an eine Anfangsseite zu übergeben. Um es hier mehr klar ein kleines Beispiel:

• Website basierend auf Zweig geladen wird
• Einige Daten POSTed an einen Endpunkt und verarbeitet (einschließlich eines Parameters benötigt nach der inital Seite neu zu laden)
• JQuery Eingeweihten das Routing (Nachladen)
• Anfänge Website wird am Zweig (hier muß ich die Parameter)

reloaded basiert Es wird keine globalen Parameter aufgerufen, so denke ich ein Session-Variable keine adäquate opt wäre Ion. Auch das Einfügen in den URL-Pfad (nicht in den Abfrageparameter) wäre ebenfalls nicht die richtige Lösung, da der Parameter sich nur auf die Ansicht und nicht direkt auf das Objekt bezieht, das in dieser Route verarbeitet wird.

Momentan benutze ich einen Abfrageparameter, den ich beim Reload mit der URL passiere. Gibt es einen besseren Weg, die benötigte Funktionalität zu bewältigen?

function(data, statusText, jqXHR) { 
 
    var cSelect = $('#input_group').val(); 
 
    window.location="{{site.uri.public}}/states?c=" + cSelect; 
 
}

2.) Die zweite Frage ist ein wenig diffus, weil ich nicht genau weiß, wie dies zu tun. Was wäre der beste Weg zum Abrufen von Daten auf einer Seite in Abhängigkeit von einer Benutzerinteraktion, z.B. Eine Option in einem Auswahl-Tag wird ausgewählt und ich möchte die Optionselemente in einem anderen Auswahl-Tag in Abhängigkeit aktualisieren.

Bitte korrigieren Sie meine Gedanken, wenn ich falsch liege. Ich würde eine JQuery-Routine aufbauen, die auf Änderungen des ersten Auswahl-Tags reagiert, auf eine bestimmte Route zugreift, um die Daten abzurufen, und die vorhandenen Optionen mit den neuen abgerufenen Daten austauschen. Wäre das der richtige Ansatz? Es würde mich wirklich sehr freuen, wenn irgendjemand einen Basiscode für die JQuery aber speziell für den Controller anhängen könnte und auf welche Weise ich die Informationen von PHP korrekt an Javascript weitergeben kann (Format der Antwort? JSON?). Das Nachladen eines einfachen Strings wäre genug, alles andere, was ich selbst herausfinden kann, benötigt nur eine Art von Basisinformationen, wie man das richtig macht.

Ich weiß, wie man diese beiden Dinge macht, aber ich möchte es richtig machen, basierend auf den UF enthaltenen Werkzeugen. Daher meine Frage und ich denke auch, dass dies anderen Leuten helfen würde, die neu bei UF sind und die darin enthaltenen Tools.

Answer 1

Lösung: Thx zu Alex

1.) Für mein Anwendungsszenario => "Speicher GUI states", die HTML5 local storage scheint die perfekte Lösung (session, local). Wenn Sie jedoch beim erneuten Laden der Server die Altdaten beibehalten oder die übergebenen Informationen benötigen, ist die Definition von Abfrageparametern die bevorzugte Option für die meisten HTTP-GET-Anforderungen.

2.) Ich spielte ein wenig mit AJAX und einem UF JSON Endpunkt.Die resultierende Lösung sollte helfen, eine Routine zu implementieren, die das asynchrone Neuladen von Daten ermöglicht und sie mit JQuery in das DOM (im Fall unterhalb eines Tabellenkörpers) druckt.

Hier ist der Beispielcode für die Ansicht (yourview.twig):

   var $selC = $("#input_group"); //e.g. <select>-tag 
       $selC.on('change', function() {  
        var $tableBody = $("#your_table_body"); 

        $.ajax({ 
         url: '{{site.uri.public}}/json/yourendpoint', 
         type: "GET", 
         dataType: "json", 
         success: function(data, textStatus, jqXHR) { 
          renderJsonToTable(data); 
          alert(jqXHR.status); 
         }, 
         error: function(jqXHR, textStatus, errorThrown) { 
          alert(jqXHR.status); 
         } 
        }); 

        function renderJsonToTable(data){ 
         $tableBody.empty(); 
         var htmlBody = $.map(data, function (item, i) { 
          return "<tr><th scope=\"row\">" + item.id + "</th><td>" + item.name + "</td></tr>"; 
         }).join(""); 

         $tableBody.append(htmlBody); 
        } 

       }); 

und für die PHP-Endpunkt-Implementierung (JsonController.php):

class JsonController extends \UserFrosting\BaseController { 

    private static $content_type = 'Content-Type'; 
    private static $content_json = 'application/json'; 

    public function __construct($app){ 
     $this->_app = $app; 
    } 

    public function getElements(){ 

     $responseContent = ''; 
     $response = $this->_app->response; 

     // Access-controlled page 
     if (!$this->_app->user->checkAccess('uri_access_right')){ 
      $responseContent = 'Access Denied'; 
      $response->setStatus(403); 
     }else{ 
      $responseContent = Elements::get(); 
      $response->setStatus(200); 
     } 

     $response[self::$content_type] = self::$content_json; 
     $response->body(json_encode($responseContent)); 

    } 
} 

Schließlich wird das Routing (index.php):

$app->get('/json/yourendpoint/?', function() use ($app) { 
    $controller = new UF\JsonController($app); 
    return $controller->getElements(); 
});