使用 AJAX 从 Symfony 控制器操作中获取数据答案

【问题标题】：Get data from a Symfony controller action with AJAX使用 AJAX 从 Symfony 控制器操作中获取数据
【发布时间】：2018-01-23 04:54:20
【问题描述】：

我有一个简单的 showAction 来显示用户的信息：

/**
 * @Route("/user/{id}", name="show_user", options={"expose"=true})
 * @Method("GET")
 *
 * @param User $user
 * @return \Symfony\Component\HttpFoundation\Response
 */
public function showAction(User $user)
{
    return $this->render('user/showUser.html.twig', array(
        'user' => $user,
    ));
}

我尝试使用 AJAX 获取信息以将其显示在单独的 div 中：

$('.showUser').click(function (e) {

    var getUrl = Routing.generate('show_user', {'id': $(this).attr('id')});
    e.preventDefault();

    $.ajax({
        url:  getUrl,
        success: function (data) {
            $("#userdetails").html(data);
        }
    });
});

我的用户列表在 html 中概览：

<table class="table-title table table-striped table-bordered">
    <thead>
    <tr>
        <th class="col-md-2">Name</th>
        <th class="col-md-1">Age</th>
        <th class="col-md-1">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        {% for user in users  %}
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button id="{{ user.id }}" type="button" class="deleteUser btn btn-lg btn-danger">Delete</button>
            <button id="{{ user.id }}" type="button" class="showUser btn btn-lg btn-primary">Show</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
<div class="displayUser col-sm-4">
    {% include 'user/showUser.html.twig' %}
</div>

还有我的 showUser 模板来显示选中的用户：

<div id="userdetails">
    {{ dump(user) }}
</div>

当前发生的情况是，当我加载页面时，{{ dump(user) }} 包含所有用户的数组，并且不为空。当我然后单击显示按钮以显示一个用户的信息时，{{ dump(user)}} 确实会更改以显示正确的信息。

另外，当我将 {{ dump(user) }} 更改为 {{ user.name }} - {{ user.age }}，并重新加载页面时，我得到了错误：

键“0, 1”的数组的键“名称”不存在 user/showUser.html.twig 在第 2 行

有人可以帮助我吗？向我解释我做错了什么？我认为我的 ajax 调用也有问题，我以前从未使用过 ajax，并且我根据我设法找到的示例创建了这个，但除此之外我没有得到。

我只想在单击用户的显示按钮时在 div 中显示用户的信息。

【问题讨论】：

可能您不需要包含{% include 'user/showUser.html.twig' %}，因为您正在通过ajax 加载详细信息

标签： jquery ajax symfony symfony-routing

【解决方案1】：

我想我明白了：

我改变了我的 ajax 函数：

$('.showUser').click(function() {
    var getUrl = Routing.generate('show_user', {'id': $(this).attr('id')});
    $.get(getUrl, function (data) {
            $(".userdetails").html(data);
    });
});

我删除了 twig include（也是 Peter Popelyskho 在 cmets 中所说的）并将 showUser.html 中的 div 粘贴到它的位置：

<table class="table-title table table-striped table-bordered">
    <thead>
    <tr>
        <th class="col-md-2">Name</th>
        <th class="col-md-1">Age</th>
        <th class="col-md-1">Actions</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        {% for user in users  %}
        <td>{{ user.name }}</td>
        <td>{{ user.age }}</td>
        <td>
            <button id="{{ user.id }}" type="button" class="deleteUser btn btn-lg btn-danger">Delete</button>
            <button id="{{ user.id }}" type="button" class="showUser btn btn-lg btn-primary">Show</button>
        </td>
    </tr>
    {% endfor %}
    </tbody>
</table>
<div class="userdetails"></div>

在我的user/showUser.html.twig 模板中，我有：{{ user.name}} - {{ user.age }}。

而且看起来不错！

如果有人认为有更好或更方便的方法，请随时告诉我，我想尽可能好地学习。

【讨论】：