Question

我在控制器中有PUT方法

  /**
   *@Route("/change-status/{user}/{status}", name="users_change_status")
   * ...
   **/
   public function changeUserStatus(User $user, string $status){
         .....
   }

在树枝模板中，有一个显示和更改用户状态的选择

{% for user in users %}
<select id="{{ user.id }}" onchange="changeUserStatus('{{ path('users_change_status', {'user': user.id, 'status': ???}) }}')">
     <option value="active" {% if user.status == 'active' %} selected {% endif %}>Active</option>
      <option value="pending" {% if user.status == 'pending' %} selected {% endif %}>Pending</option>
     <option value="inactive" {% if user.status == 'inactive' %} selected {% endif %}>Inactive</option>
</select>
{% endfor %}

我想在选择选项更改时发送带有用户ID和状态的PUT请求。这是javascript代码

    function changeUserStatus($url) {
        $.ajax({
            type: "PUT",
            url: $url,
            async: true,
            data: { },
            success: function () {
                console.log('success');
            }
        });
    }

问题：

如何将所选选项值作为请求url参数发送？

Answer 1

从选择字段中删除onchange属性。

<select class="select-status" base-url="{{ path('admin_users_change_status', {'user': user.id, 'status': ''}) }}">
    <option value="active" {% if user.status == 'active' %} selected {% endif %}>Active</option>
    <option value="pending" {% if user.status == 'pending' %} selected {% endif %}>Pending</option>
    <option value="inactive" {% if user.status == 'inactive' %} selected {% endif %}>Inactive</option>
</select>

在选择字段上设置change事件侦听器。获取基本网址并附加选择字段值。

在changeUserStatus函数中，您可以删除data（因为没有传入数据）和async（因为默认情况下为真）。

$('.select-status').change(function() {
    var url = $(this).attr('base-url') + $(this).val();

    changeUserStatus(url);
});

function changeUserStatus(url) {
    $.ajax({
        type: 'PUT',
        url: url,
        success: function () {
            console.log('success');
        }
    });
}

TWIG select onChange用参数发出AJAX请求

1 个答案: