对控制器的简单AJAX请求-Symfony3 [英] Simple AJAX request to controller - Symfony3

问题描述

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

I use Symfony3 with PhpStorm.2016.3.2 on Ubuntu16.04

我以前从未做过AJAX请求，想测试从视图到控制器的对控制器的调用，然后将答案发送回JSON中的视图.

I never done an AJAX request before and would like to test a call to controller from a view->to the controller->that sends an answer back to the view in JSON.

所以我读了文档，但是它们都很具体.因此，我的愿望是只能在视图(index.html.twig)中编写一个简单的AJAX请求，以对其进行测试，调用控制器(MainController.php)并在视图的JSON中返回答案.

So I read on the doc but they are all very specific. So my desire is to only being able to write a simple AJAX request in a view(index.html.twig),for testing it, make a call to the controller(MainController.php) and return the answer in JSON in the view.

这是我的观点:

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

{% block content %}

{% endblock %}

我的控制器:

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

我真的不想让别人做这项工作，我只是想知道如何使其工作.因此，很抱歉，如果我的机票很空，但也许它也可以帮助其他人(如我)知道从哪里开始.

I really don't want to make the job done by the others, I just want to get a hint of how to make it work. So I'm sorry if my ticket is rather empty but maybe it can help others too, like me, to know where to start off.

推荐答案

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

At first you need to register the route to your controller:

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

然后在主视图中加载jQuery，也许您已经完成了.您需要在模板中调用号召性用语，并需要一些触发器来启动AJAX请求:

Then load jQuery in your main view, perhaps you've done it already. You need a call to action in your template, some trigger to beginn the AJAX request:

{% 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 %}

至少您的控制器非常简单:

And at least your controller is very simple:

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

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

I think this concept should make clear how it can work

这篇关于对控制器的简单AJAX请求-Symfony3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！