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

Question

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

1.) "right" / "expected" 在使用 JQuery 重新加载页面期间以及将一些数据发布到端点之后将参数传递回初始页面的方法是什么。为了更清楚这里有一个小例子：

基于 Twig 的站点已加载
一些数据被发布到端点并被处理（包括重新加载初始页面后所需的参数）
JQuery发起路由（重载）
初始站点是根据twig重新加载的（这里我需要参数）

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

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

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

2.) 第二个问题有点模糊，因为我不知道该怎么做。根据用户交互在页面上获取数据的最佳方式是什么，例如select-tag 中的一个选项被选中，我想根据依赖更新另一个 select-tag 中的选项元素。

如有错误请指正。我会建立一个 JQuery 例程，它对第一个 select 标签的变化做出反应，访问特定路径以获取数据并将现有选项与新获取的数据交换。这是正确的方法吗？如果有人可以为 JQuery 附加一些基本代码，但特别是对于控制器，并且我可以通过这种方式正确地将信息从 php 传回 Javascript （响应的格式？json？）。重新加载一个简单的字符串就足够了，我自己能弄清楚的所有其他内容只需要一些基本信息如何正确执行此操作。

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

Answer 1

解决方案：感谢Alex

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

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

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

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

Userfrosting: Passing Params, Async Data Fetching

jquery

eloquent

twig

slim

userfrosting