Userfrosting: Passing Params, Async Data Fetching

问题:

I'm quite new to UF and I'm developing a web tool based on the included tooling. I already read all the tutorials carefully and also mostly understand the basic workflows between PHP, Twig, Slim and JQuery. Even though I'm not a professional in all of these technologies and therefore I have two questions, which hold me a little back on developting the stuff that I want to achieve. Please don't blame me if the questions are some kind of stupid.

1.) What is the "right" / "expected" way to pass parameters back to an initial page during reloading the page with JQuery and after POSTing some data to an endpoint. To make it more clear here a little example:

• Site based on Twig is loaded
• Some data is POSTed to an endpoint and processed (including a parameter needed after reloading the inital page)
• JQuery initiates the routing (reloading)
• initial Site is reloaded based on twig (here I need the parameter)

It is no global required parameter so i guess a session variable would not be an adequate option. Also putting it in the url path (not query param) would also not be the proper solution because the parameter is only related to the view and not directly to the object processed in this route.

Currently I use a query parameter, which I pass with the URL on reload. Is there a better way of handling the needed funcionality?

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

2.) The second question is a little more diffuse because I don't exactly know how to do this. What would be the best way of fetching data on a page in dependence of an user interaction e.g. an option in a select-tag is chosen and I want to update the option elements in an other select-tag in dependence.

Please correct my thoughts if I'm wrong. I would build up a JQuery routine which reacts on changes of the first select-tag, accesses a specific route to fetch the data and exchange the existing option's with the new fetched data. Would this be the correct approach? It would make me really really happy if someone can attach some basic code for the JQuery but especially for the Controller and in which way I can correctly pass back the information from php to Javascript (format of the response? json?). Reloading a simple string would be enough, everything else I can figure out myself just need some kind of basic information how to do this right.

I know how to do both of this things, but I want to do it correctly based on the UF included tooling. Therefore my question and I also think this would help other people who are new to UF and the included tools.

回答1:

Solution: Thx to Alex

1.) For my application scenario => "storing GUI states", the HTML5 local storage seems the perfect solution (sessionStorage, localStorage). But if you want preserve legacy or need the passed information during server-side reloading - defining query parameters would be the preferred option for most of the HTTP GET requests.

2.) I played a little with AJAX and an UF JSON endpoint. The resulting solution should help on implementing a routine which allows the async reloading of data and printing it with JQuery to the DOM (in the case below a table body).

Here the example code for the view (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);
                    }

                });

and for the php endpoint implementation (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) );

    }
}

Finally the routing (index.php):

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