Userfrosting：传递参数，异步数据获取答案

【问题标题】：Userfrosting: Passing Params, Async Data FetchingUserfrosting：传递参数，异步数据获取
【发布时间】：2016-12-05 17:31:57
【问题描述】：

我对 UF 很陌生，我正在开发一个基于所包含工具的网络工具。我已经仔细阅读了所有教程，并且大部分了解 PHP、Twig、Slim 和 JQuery 之间的基本工作流程。尽管我不是所有这些技术的专业人士，因此我有两个问题，这让我在开发我想要实现的东西时有点退缩。如果问题有点愚蠢，请不要怪我。

1.) 在使用 JQuery 重新加载页面期间以及将一些数据发布到端点之后，将参数传回初始页面的“正确”/“预期”方式是什么？为了更清楚，这里举个小例子：

已加载基于 Twig 的网站
一些数据被 POST 到端点并被处理（包括重新加载初始页面后需要的参数）
JQuery 启动路由（重新加载）
初始站点基于twig重新加载（这里需要参数）

它不是全局必需参数，所以我猜会话变量不是一个合适的选择。同样将它放在 url 路径（不是查询参数）中也不是正确的解决方案，因为该参数仅与视图相关，而不直接与此路由中处理的对象相关。

目前我使用一个查询参数，我在重新加载时将其与 URL 一起传递。有没有更好的方法来处理所需的功能？

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

2.) 第二个问题比较分散，因为我不知道该怎么做。根据用户交互例如在页面上获取数据的最佳方式是什么？选择标签中的一个选项被选中，我想更新其他选择标签中的选项元素。

如果我错了，请纠正我的想法。我将构建一个 JQuery 例程，它对第一个选择标记的更改做出反应，访问特定的路由以获取数据并用新获取的数据交换现有选项。这会是正确的方法吗？如果有人可以为 JQuery 附加一些基本代码，尤其是为 Controller 附加一些基本代码，并且我可以正确地将信息从 php 传递回 Javascript（响应格式？json？），那会让我非常高兴。重新加载一个简单的字符串就足够了，我自己能弄清楚的其他一切只需要一些基本信息如何正确地做到这一点。

我知道如何做这两件事，但我想根据 UF 包含的工具正确地做这件事。因此，我的问题和我也认为这将有助于其他不熟悉 UF 和随附工具的人。

【问题讨论】：

请注意，您可以回答自己的问题！这将使其他人更容易解析，而不是在您的问题中发布您的答案。
@alexw 好的，谢谢 alex，因为没有人回答我认为在问题本身中包含我的解决方案应该是正确的方法。我在 Stackoverflow 上见过很多次，但我会像建议的那样把它分开。

标签： jquery eloquent twig slim userfrosting

【解决方案1】：

解决方案：谢谢Alex

1.) 对于我的应用场景 => “存储 GUI 状态”，HTML5 local storage 似乎是完美的解决方案（sessionStorage、localStorage）。但是，如果您想在服务器端重新加载期间保留传统或需要传递的信息 - 定义查询参数将是大多数 HTTP GET 请求的首选选项。

2.) 我玩了一点 AJAX 和一个 UF JSON 端点。由此产生的解决方案应该有助于实现一个例程，该例程允许异步重新加载数据并使用 JQuery 将其打印到 DOM（在表格主体下方的情况下）。

这里是视图的示例代码 (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);
                    }

                });

对于 php 端点实现 (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) );

    }
}

最后是路由（index.php）：

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

【讨论】：