web-dev-qa-db-ja.com

シンプルAJAXコントローラーへのリクエスト-Symfony3

Ubuntu16.04でPhpStorm.2016.3.2でSymfony3を使用します

以前にAJAXリクエストを行ったことはありません。ビューからコントローラーへの呼び出しをテストしたいです。

だから私はドキュメントを読みましたが、それらはすべて非常に具体的です。したがって、私の望みは、view(index.html.twig)で簡単なAJAXリクエストを書くことができるだけで、それをテストするためにcontroller(MainController.php)を呼び出し、ビューのJSON。

これは私の見解です：

{% extends 'app/layout.html.twig' %}

{% block content %}

{% endblock %}

私のコントローラー：

class MainController extends Controller
{
    public function indexAction()
    {
        return $this->render('app/main/index.html.twig');
    }
}

私は本当に他の人に仕事をさせたくありません。ただそれを機能させる方法のヒントを得たいだけです。チケットが空っぽの場合は申し訳ありませんが、私のような他の人もどこから始めればよいかを知ることができるかもしれません。

ajaxsymfony
8
chicken burger

最初に、コントローラーへのルートを登録する必要があります。

app_bundle_route:
   path:     /ajax_request
   defaults: { _controller: AppBundle:Main:index }

次に、メインビューにjQueryをロードします。おそらく、すでに実行済みです。テンプレートでアクションを呼び出す必要があります。AJAXリクエストを開始するトリガー：

{% extends 'app/layout.html.twig' %}

{% block content %}
    <button class="ajax">click me!</button>
    <div id="ajax-results">here comes the result</div>
    <script>
        $(document).on('click', 'button.ajax', function(){
            that = $(this);
            $.ajax({
                url:'{{ (path('app_bundle_route')) }}',
                type: "POST",
                dataType: "json",
                data: {
                    "some_var_name": "some_var_value"
                },
                async: true,
                success: function (data)
                {
                    console.log(data)
                    $('div#ajax-results').html(data.output);

                }
            });
            return false;

        });
    </script>
{% endblock %}

そして、少なくともコントローラーは非常にシンプルです。

public function indexAction(Request $request)
{
    if($request->request->get('some_var_name')){
        //make something curious, get some unbelieveable data
        $arrData = ['output' => 'here the result which will appear in div'];
        return new JsonResponse($arrData);
    }

    return $this->render('app/main/index.html.twig');
}

この概念は、それがどのように機能するかを明確にする必要があると思います

27
Rawburner