Symfony：将参数传递给 Ajax url答案

【问题标题】：Symfony: pass parameter to Ajax urlSymfony：将参数传递给 Ajax url
【发布时间】：2016-07-30 12:00:58
【问题描述】：

我正在尝试弄清楚如何在不重新加载页面的情况下使用复选框启用/禁用用户。

index.html.twig

<table>
  <thead>
    <tr>
      <th>UserName</th>
      <th>Enabled</th>
    </tr>
   </thead>
   <tbody>
   {% for user in users %}
     <td><a href="{{ path('user_show', {'id': user.id}) }}">
          {{ user.username }}</a>
     </td>
     <td><input id="user_enable_{{ user.id }}" onclick="enabledChange({{ user.id }})" 
     type="checkbox" {% if user.enabled %}checked{% endif %}/>
     </td>
   {% endfor %}
  </tbody>
</table>

<script>
var changePath = {{ path('user_enable_change', {'id': user.id}) }};

function enabledChange(id)
{
    var value = $(this).val();
    console.log('value: ' + value);
    $.ajax({
        type: "POST",
        url: changePath,
        async: true,
        data: { },
        success: function () {
            console.log('success');
        }
    });
}
</script>

用户控制器

 /**
 * @Route("/enable/{id}", name="user_enable_change")
 */
public function userDisableAction(User $user) {

    if($user->isEnabled()){
        $user->setEnabled(false);
    }else {
        $user->setEnabled(true);
    }

    try {
        $em = $this->getDoctrine()->getManager();
        $em->persist($user);
        $em->flush();
    }
    catch(\Exception $e) {
        return new JsonResponse('error');
    }

    return new JsonResponse('success');

}

问题

如何将对应的用户id设置为enabledChange函数并根据用户状态更改选中状态？

【问题讨论】：

当前代码遇到什么问题？
@alokpatel 我有错误：@Admin/UserPanel/index.html.twig 中不存在变量“用户”，因为我将参数 user.id 设置为用户的 {% 之外的 changePath在用户 %}
您必须在 var changePath 函数中定义它并使用传递的参数。

标签： php ajax symfony twig

【解决方案1】：

您需要在变量中添加引号，并将changePath 作为参数传递：

onclick="enabledChange('{{ user.id }}', '{{ path('user_enable_change', {'id': user.id}) }}')"

然后：

function enabledChange(id, changePath) {
    var value = $(this).val();
    console.log('value: ' + value);
    $.ajax({
        type: "POST",
        url: changePath,
        async: true,
        data: { },
        success: function () {
            console.log('success');
        }
    });
}

我希望这会有所帮助。

【讨论】：

【解决方案2】：

另一种干净的方法是通过数据属性传递参数和路由并按类访问按钮。在我的示例中，我必须在不刷新的情况下增加产品数量：

<button class="btn btn-sm btn-info increase"
data-id="{{ p.id }}"
data-url="{{ path('cart_add', {'pid': p.id}) }}">
Increase qty
</button>

$(document).ready(function() {
    $(".increase").click(function (e) {
        var value = $(this).data('id');
        console.log('value: ' + value);
        $.ajax({
            type: "POST",
            url: $(this).data('url'),
            async: true,
            data: {},
            success: function () {
                console.log('success increment');
            }
        });
    });
});

【讨论】：