javascript - 如何使用 Laravel 代码作为 Ajax 响应

Question

我正在使用 Laravel 8，我尝试使用 Ajax 请求来显示我的表的结果:

$.ajax({
    url: "{{url('/admin/users/order-by')}}",
    type: "POST",
    data: {
        order_by: orderBy,
        _token: '{{csrf_token()}}'
    },
    dataType: 'json',
    success: function (result) {
        var userList = document.getElementById("user-list");
        $('#contentDiv').show();
        $.each(result.orderby, function (key, value) {
            $("#user-list").append('<tr><td>' + value.id + '</td> <td>' + value.name + '</td> <td>' + value.email + '</td> <td>' + value.is_active + '</td><td class="d-flex"><div class="btn-group"></div></td></tr>');
        });
    }
});

所以基本上它会向表中添加一些新行。实际上在最后 <td class="d-flex"></td> ，我想使用一些像这样的按钮:

@if(!$user->isSameUser($user->id))
    <td class="d-flex">
        <div class="btn-group">
            <a href="{{ route('admin.users.edit' , ['user' => $user->id]) }}" class="btn btn-sm btn-purple">Accesses</a>
            <a href="{{ route('admin.users.edit' , ['user' => $user->id]) }}" class="btn btn-sm btn-info">Money Wallet</a>
            <a href="{{ route('admin.users.edit' , ['user' => $user->id]) }}" class="btn btn-sm btn-warning"> View Information</a>
            <a href="{{ route('admin.users.edit' , ['user' => $user->id]) }}" class="btn btn-sm btn-navy">Edit Profile</a>
            <form id="delForm" action="{{ route('admin.users.destroy' , ['user' => $user->id]) }}" method="POST">
                @csrf
                @method('DELETE')
                <button type="button" class="button btn btn-sm btn-orange ml-1" onclick="this.classList.toggle('button--loading')" id="btn-submit" type="submit" data-name="{{ $user->name }}" >
                    <span class="button__text">Delete</span>
                </button>
            </form>
        </div>
    </td>
@endif

现在为了在 Ajax 响应中显示这些数据，我需要添加:

...<td class="d-flex"><div class="btn-group">__BUTTONS GOES HERS__</div></td></tr>');

但不知道如何将指定的代码与 Ajax 响应连接起来。

更新1

我终于可以成功地将按钮传递给表格行了。

但这里唯一的问题是它不读取 JavaScript 中的用户 id 变量:

@push('scripts')
        $("#dropdown-list").on('change', function(){
            var orderBy = document.getElementById("dropdown-list").value;
            $('#contentDiv').hide();
            $("#user-list").html('');
            if(orderBy == 'asc')
            {
                var orderBy = 1;
            } else if(orderBy == 'desc')
            {
                var orderBy = 2;
            }

            const url1 = "{{ route('admin.users.permissions' , ['user' => '__USER_ID__']) }}"
            const url2 = "{{ route('admin.users.wallet' , ['user' => '__USER_ID__']) }}"
            const url3 = "{{ route('admin.users.info' , ['user' => '__USER_ID__']) }}"
            const url4 = "{{ route('admin.users.edit' , ['user' => '__USER_ID__']) }}"
            $.ajax({
                url: "{{url('/admin/users/order-by')}}",
                type: "POST",
                data: {
                    order_by: orderBy,
                    _token: '{{csrf_token()}}'
                },
                dataType: 'json',
                success: function (result) {
                    $('#contentDiv').show();
                    $.each(result.orderby, function (key, value) {
                        const $row = $('<tr />');
                        $row.append('<td>' + value.id + '</td>');
                        $row.append('<td>' + value.name + '</td>');
                        $row.append('<td>' + value.email + '</td>');
                        $row.append('<td>' + value.is_active + '</td>');
                        const $btn_grp = $('<td class="d-flex"><div class="btn-group" />');
                        $btn_grp.append('<a href="' + url1.replace('__USER_ID__', '{!! $user->id !!}') + '" class="btn btn-sm btn-purple">Permissions</a>');
                        $btn_grp.append('<a href="' + url2.replace('__USER_ID__', '1') + '" class="btn btn-sm btn-info">Wallet</a>');
                        $btn_grp.append('<a href="' + url3.replace('__USER_ID__', '1') + '" class="btn btn-sm btn-warning">Information</a>');
                        $btn_grp.append('<a href="' + url4.replace('__USER_ID__', '1') + '" class="btn btn-sm btn-navy">Edit</a>');
                        const $btn_close = $('</div></td></tr>');
                        $btn_grp.append($btn_close);
                        $row.append($btn_grp);
                        $("#user-list").append($row);
                    });
                }
            });
@endpush

@component('admin.layouts.content' , ['title' => 'Users List'])
...
@endcomponent

正如你所看到的，我尝试像这样传递一个用户变量 id:

$btn_grp.append('<a href="' + url1.replace('__USER_ID__', '{!! $user->id !!}') + '" class="btn btn-sm btn-purple">Permissions</a>');

但不知何故我得到Undefined variable: user错误:

那么这里出了什么问题？如何正确传递变量？

Answer 1

我想提前提出一个重要警告，您需要确定并使用服务器上的策略或类似方式处理您的路由权限

有几种不同的方法可以解决这个问题。

服务器端资源

这是我推荐的。你会做一个 Eloquent API Resource和 conditionally add您需要到用户对象的链接。最后，我推荐这个，因为你可以 utilize URL::signedRoute(...) to create a verifiable URL并帮助防止有人篡改 URL。

<?php
 
namespace App\Http\Resources;
 
use Illuminate\Http\Resources\Json\JsonResource;
use Illuminate\Support\Facades\URL;
 
class UserResource extends JsonResource
{
    /**
     * Transform the resource into an array.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email,
            'is_active' => $this->is_active,
            'links' => $this->when(Auth::id() === $this->id, function() {
                return [
                    'Accesses' => URL::signedRoute('admin.users.edit' , ['user' => $this->id]),
                    'Money Wallet' => URL::signedRoute('admin.users.edit' , ['user' => $this->id]),
                    //etc
        ];
    }
}

然后，在您的 ajax 请求中:

$.ajax({
    url: "{{url('/admin/users/order-by')}}",
    type: "POST",
    data: {
        order_by: orderBy,
        _token: '{{csrf_token()}}'
    },
    dataType: 'json',
    success: function (result) {
        var userList = document.getElementById("user-list");
        $('#contentDiv').show();
        // Note the change from orderby to data here. Resources wrap their results in a data object by default.
        $.each(result.data, function(key, value){
            const $row = $('<tr />');
            $row.append('<td>' + value.id + '</td>');
            $row.append('<td>' + value.name + '</td>');
            $row.append('<td>' + value.email + '</td>');
            $row.append('<td>' + value.is_active + '</td>');
            const $btn_grp = $('<div class="btn-group" />');
            if(value.links){
                // Object key is your button label and route is the value based on the resource above.
                for(const [label, route] in Object.entries(value.links)){
                    $btn_grp.append('<a href="' + route + '" class="btn btn-sm btn-purple"> + label + </a>');
                }
            }
            $row.append(
                $('<td class="d-flex" />).append($btn_grp)
            );
            $("#user-list").append($row);
        });
    }
});

您也可以直接在 Controller 中执行相同操作，方法是将每个用户转换为一个数组，并在返回之前有条件地将链接附加到该数组，但资源正是为此类事情构建的，并有助于 separation of concerns .

客户端

如果您需要在客户端严格处理它，这就是我的处理方式。在我看来，这种方法有点难以维护，但它是一个可行的选择。如果你真的走这条路，你需要绝对确定你保护路线免受服务器端未经授权的访问，因为用户猜测其他用户管理页面的 URL 是微不足道的。

const url = "{{ route('admin.users.edit' , ['user' => '__USER_ID__']) }}"
$.ajax({
    url: "{{url('/admin/users/order-by')}}",
    type: "POST",
    data: {
        order_by: orderBy,
        _token: '{{csrf_token()}}'
    },
    dataType: 'json',
    success: function (result) {
        var userList = document.getElementById("user-list");
        $('#contentDiv').show();
        $.each(result.orderby, function (key, value) {
            const $row = $('<tr />');
            $row.append('<td>' + value.id + '</td>');
            $row.append('<td>' + value.name + '</td>');
            $row.append('<td>' + value.email + '</td>');
            $row.append('<td>' + value.is_active + '</td>');
            if(value.id === {{$user->id}}){
                const $btn_grp = $('<div class="btn-group" />');
                $btn_grp.append('<a href="' + url.replace('__USER_ID__', '{{$user->id}}') + '" class="btn btn-sm btn-purple">Accesses</a>');
                $btn_grp.append('<a href="' + url.replace('__USER_ID__', '{{$user->id}}') + '" class="btn btn-sm btn-info">Money Wallet</a>');
                //etc

                const $btn_cell = $('<td class="d-flex" />');
                $btn_cell.append($btn_grp);
                $row.append($btn_cel);
            } else {
                // I am assuming you will need something like this for rows that do not match
                $row.append('<td class="d-flex"></td>');
            }

            $("#user-list").append($row);
        });
    }
});