对控制器的简单AJAX请求-Symfony3

一尘不染

对控制器的简单AJAX请求-Symfony3

ajax

我在Ubuntu16.04上将Symfony3与PhpStorm.2016.3.2一起使用

我之前从未做过AJAX请求，并且想测试从view->到controller->的控制器调用，该调用将答案发送回JSON中的视图。

所以我读了文档，但它们都很具体。因此，我的愿望是只能在视图中编写一个简单的AJAX请求(index.html.twig)，以便对其进行测试，调用控制器(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');
    }
}

我真的不想让别人做这项工作，我只是想知道如何使其工作。因此，对我的机票很空缺感到抱歉，但也许它也可以帮助其他人（例如我）知道从哪里开始。

阅读 231

2020-07-26

共1个答案

一尘不染

首先，您需要注册到控制器的路由：

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');
}

我认为这个概念应该弄清楚它如何工作

2020-07-26