Userfrosting:传递参数,异步数据提取

时间:2016-07-31 14:58:50

标签: jquery eloquent twig slim userfrosting

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

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

  • 已加载基于Twig的网站
  • 某些数据已发布到端点并进行处理(包括重新加载初始页面后所需的参数)
  • JQuery启动路由(重新加载)
  • 初始网站根据树枝重新加载(这里我需要参数)

这不是全局必需参数,所以我猜会话变量不是一个合适的选项。将它放在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-tag的变化,访问一个特定的路由来获取数据,并用新获取的数据交换现有的选项。这是正确的做法吗?如果有人可以为JQuery附加一些基本代码,特别是对于Controller,我会非常高兴,我可以正确地将信息从php传递回Javascript(响应的格式?json?)。重新加载一个简单的字符串就足够了,我能想出的其他一切只需要某种基本信息就可以做到这一点。

我知道如何做这两件事,但我想基于UF包含的工具正确地做到这一点。因此,我的问题和我也认为这将有助于其他新用户和使用工具的人。

1 个答案:

答案 0 :(得分:1)

解决方案:Thx到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();
});