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

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);
        });
    }
});

您也可以直接在控制器中执行相同的操作，方法是将每个用户转换为一个数组，并在返回之前有条件地将链接附加到该数组，但资源正是为此类事情构建的，并通过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);
        });
    }
});