1

私は UF を初めて使用し、含まれているツールに基づいて Web ツールを開発しています。私はすでにすべてのチュートリアルを注意深く読んでおり、PHP、Twig、Slim、および JQuery 間の基本的なワークフローもほぼ理解しています。私はこれらすべてのテクノロジーの専門家ではありませんが、2 つの質問があります。これらの質問が、私が達成したいことの開発を少し妨げています。質問がばかげている場合でも、私を責めないでください。

1.) JQuery を使用してページをリロードする際、および一部のデータをエンドポイントに POST した後に、パラメータを最初のページに戻す「正しい」/「期待される」方法は何ですか。ここでより明確にするために、少し例を示します。

  • Twig ベースのサイトが読み込まれます
  • 一部のデータはエンドポイントに POST されて処理されます (初期ページのリロード後に必要なパラメーターを含む)
  • JQuery がルーティング (リロード) を開始します
  • 最初のサイトは twig に基づいてリロードされます (ここではパラメーターが必要です)

これはグローバルな必須パラメーターではないため、セッション変数は適切なオプションではないと思います。また、パラメーターはビューにのみ関連し、このルートで処理されるオブジェクトに直接関連するわけではないため、(クエリパラメーターではなく) URL パスに配置することも適切な解決策ではありません。

現在、リロード時に URL とともに渡すクエリ パラメータを使用しています。必要な機能を処理するより良い方法はありますか?

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

2.) 2 番目の質問は、これを行う方法が正確にわからないため、もう少し曖昧です。ユーザーの操作に応じてページ上のデータをフェッチする最良の方法は何でしょう。たとえば、選択タグのオプションが選択され、それに応じて他の選択タグのオプション要素を更新したいと考えています。

私が間違っている場合は、私の考えを修正してください。最初の選択タグの変更に反応し、特定のルートにアクセスしてデータをフェッチし、既存のオプションを新しいフェッチされたデータと交換する JQuery ルーチンを構築します。これは正しいアプローチでしょうか？誰かがJQuery、特にコントローラーの基本的なコードを添付して、phpからJavascriptに情報を正しく返すことができれば、本当にうれしいです（応答の形式は？json？）。単純な文字列をリロードするだけで十分です。それ以外は、自分で理解できるものはすべて、これを正しく行うための基本的な情報が必要です。

私はこの両方を行う方法を知っていますが、UF に含まれるツールに基づいて正しく実行したいと考えています。したがって、私の質問と、これは、UF と含まれているツールを初めて使用する他の人にも役立つと思います。

4

1 に答える 1

1

解決策：アレックスへのThx

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 に答える