1

我对 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 和随附工具的人。

4

1 回答 1

1

解决方案：感谢Alex

1.）对于我的应用场景=>“存储GUI状态”，HTML5本地存储似乎是完美的解决方案（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();
});
于 2016-08-13T10:41:07.003 回答