Ajax url to action 不起作用 + Symfony2

Question

我想像这样使用 jquery 自动完成功能进行 ajax 调用：

$("#register_player_team").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: "{{path('volley_scout_getteams_data')}}",
            dataType: "jsonp",
            success: function( data ) {
                console.log(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                console.log(xhr.status);
                console.log(thrownError);
            }
        });
    }
});

在我的 routing.yml 中，我定义了以下路由：

volley_scout_getteams_data:
pattern:  /team/getteams
defaults: { _controller: VolleyScoutBundle:Team:getteams }

在我的 TeamController 中，我有一个名为 getteamsAction() 的操作：

public function getteamsAction()
{
    $entityManager = $this->getDoctrine()->getManager();
    // Get teams from database
    $teams = $entityManager->getRepository('VolleyScoutBundle:Teams')->findAll();

    foreach($teams as $team){
        var_dump($team);
    }

    die();
}

（dump 和 die() 只是为了测试，我想看看他能不能找到链接）。 但是当我想进行 ajax 调用时，我总是会收到以下错误：

http://localhost:8080/volleyscout/web/app_dev.php/user/%7B%7Bpath('volley_s…)%7D%7D?callback=jQuery110207641139030456543_1389372448462&_=1389372448463 404 (Not Found) 

由于某种原因，他找不到动作......有人知道我做错了什么吗？当我尝试这样的链接时：web/app_dev.php/team/getteams 我得到了团队的转储..

更新： 我的 javascript 链接在基本视图（树枝）中定义，如下所示：

{% block javascripts %}
    {% javascripts
        '@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
        '@VolleyScoutBundle/Resources/public/js/*'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

而 ajax 调用在我的 page.js 中：

(function () {
    $("#register_userType").change(function(){
        var value = $(this).find("option:selected").val();
        if(value == 'P' || value == 'T'){
            $('.teams').show();
        }
        else{
            $('.teams').hide();
        }
    });
    $("#register_player_team").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "{{path('volley_scout_getteams_data')}}",
                dataType: "jsonp",
                success: function( data ) {
                    console.log(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    console.log(xhr.status);
                    console.log(thrownError);
                }
            });
        }
    });
})();

更新 2： 我做了以下事情：

• 安装包
• 将包添加到我的 AppKernel
• 在app/config/routing.yml中注册了路由定义
• 已发布资产（php app/console assets:install --symlink web）

像这样将 2 个 javascript 行添加到我的 base.html.twig 中：

{% block javascripts %}
    {% javascripts
        '@VolleyScoutBundle/Resources/public/js/jquery-1.10.2.min.js'
        '@FOSJsRoutingBundle/Resources/public/js/router.js'
        '@VolleyScoutBundle/Resources/public/js/bootstrap.min.js'
        '@VolleyScoutBundle/Resources/public/js/jquery-ui-1.10.3.custom.min.js'
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script src="{{ path('fos_js_routing_js', {"callback": "fos.Router.setData"}) }}"></script>
    <script src="{{ asset('bundles/volleyscout/js/security.js') }}"></script>
{% endblock %}

但现在我得到了这个错误：

GET http://localhost:8080/volleyscout/web/app_dev.php/js/routing?callback=fos.Router.setData 500 (Internal Server Error) register:117
Uncaught Error: The route "volley_scout_getteams_data" does not exist. 

这很奇怪。当我清除缓存时，它第一次完美运行。当我刷新时，它会显示错误...

Answer 1

您的 javascript 代码中的以下行

url: "{{path('volley_scout_getteams_data')}}",

不会工作...

最好的方法是使用 FOSJsRoutingBundle

1 安装 FOSJsRoutingBundle 以在 JavaScript 代码中公开您的路由。 （非常直接）

2启用您的路线

volley_scout_getteams_data:
    pattern:  /team/getteams
    defaults: { _controller: VolleyScoutBundle:Team:getteams }
    options:
        expose: true

3 适配你的js

var getTeamsUrl = Routing.generate('volley_scout_getteams_data');

$("#register_player_team").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: getTeamsUrl,
            //...
        });
    }
});

Answer 2

遇到这个问题/答案，几乎开始安装@Mick 在答案中提到的 FOSJsRoutingBundle。由于我在 Ajax 请求中遇到了完全相同的问题，因此我无法获取 URL。但现在我认为不需要获取 FOSJsRoutingBundle..

什么是没有<form> 标签的输入字段？甚至更好：为什么我的<input> 字段不在<form> 中？在表单标记之外有<input> 字段绝对是有效的HTML，但实际上没有任何意义。

无论如何，让<form> 包围<input> 是有意义的，所以如果javascript 不应该工作，为什么会这样，它会将请求发送到正确的位置并加载页面。因此，现在如果您在输入周围有一个表单，只需从那里获取 URL...

这对我有用：

添加<form>

{{ form_start(form, {'action': path('volley_scout_getteams_data')}) }}

使用 javascript 获取 URL/路径

$.ajax({
    url: $(this).closest('form').attr('action'),

Answer 3

从您的 ajax 网址中删除 {{ }}。

Answer 4

如果您不想安装任何捆绑包。您可以使用 DOM Location 主机名属性 - window.location.origin。

首先创建一个简单的全局函数

function getRootUrl() {
    return window.location.origin;
}

现在您可以在任何地方使用它，例如：

var getTeamsUrl = getRootUrl() + "/volley/scout/get-teams";

$("#register_player_team").autocomplete({
    source: function( request, response ) {
        $.ajax({
            url: getTeamsUrl,
            //...
        });
    }
});

注意： 它对我有用，但在某些情况下，此解决方案可能会导致一些问题。