laravel 無法使用 ajax 服務器狀態 419 發布數據

Question

我正在用 Laravel 做一個項目。

當我更改以下 select 元素的選定選項時，我應該將選定的值插入 mysql 數據庫，以從服務器檢索有關選定 id 的所有數據（例如用戶名）。

這是 select 元素 (adminArea.blade.php)：

<select name="employees" onchange="fillEmployeeData(this)" class="form-control col-sm-6" id="employees">
    <option value="0"></option>
    @foreach ($users as $user)
    <option value="{{ $user->id }}">{{ $user->surname . ' ' . $user->name }}</option>
    @endforeach
</select>

這就是所謂的 function (adminArea.blade.php)::

function fillEmployeeData(emp_id) {
    var emp_selected = emp_id.value;
    $.ajax({
        type: "POST",
        url: "{{ route('adminAreaPostEmployee') }}",
        data: 'emp_selected=' + emp_selected,
        success: function (data) {
            var emp_data = JSON.parse(data);
            alert(emp_data);
        }
    });
};

這些是我的路線（web.php）：

Route::get('/adminarea', 'AdminAreaController@index')->name('adminArea');
Route::post('/adminarea/postemployee', 'AdminAreaController@post_employee')->name('adminAreaPostEmployee');

這些是我的 controller 方法（adminAreaController.php）：

public function post_employee(Request $request)
{
    $select = $request->get('emp_selected');
    $user = User::where('id', $select);
    echo $user;
}

public function index()
{
    $operations = Operation::all();
    $users = User::all()->sortBy('surname');
    $rooms = Room::all();
    return view('adminArea', compact('users', 'rooms', 'operations'));
}

但是，當我更改所選值時，什么也沒有發生......如果我將 go 發送到開發人員工具，我會看到以下錯誤：

加載資源失敗：服務器響應狀態為 419（未知狀態）。 Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException 此路由不支持 GET 方法。 支持的方法：POST。

我沒有看到任何警報。 有人可以幫助我嗎？

Answer 1

MethodNotAllowedHttpException的 HTTP 狀態代碼為405

看這里

public function __construct(array $allow, string $message = null, \Throwable $previous = null, ?int $code = 0, array $headers = [])
{
    $headers['Allow'] = strtoupper(implode(', ', $allow));
    parent::__construct(405, $message, $previous, $headers, $code);
}

A TokenMismatchException HTTP 狀態碼為419

看這里

protected function prepareException(Exception $e)
{
    if ($e instanceof ModelNotFoundException) {
        $e = new NotFoundHttpException($e->getMessage(), $e);
    } elseif ($e instanceof AuthorizationException) {
        $e = new AccessDeniedHttpException($e->getMessage(), $e);
    } elseif ($e instanceof TokenMismatchException) {
        // HTTP Status code is send in the header here
        $e = new HttpException(419, $e->getMessage(), $e);
    } elseif ($e instanceof SuspiciousOperationException) {
        $e = new NotFoundHttpException('Bad hostname provided.', $e);
    }
    return $e;
}

所以這似乎是一個 CSRF 令牌問題

確保您的文檔頭部有一個元標記，如下所示

<meta name="csrf-token" content="{{ csrf_token() }}">

也來自JQuery Ajax 文檔

我認為 HTTP 方法應該定義為method參數而不是type （盡管type有效¯\_(ツ)_/¯）

// Send a CSRF token header with every Ajax request
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
function fillEmployeeData(emp_id) {
    var emp_selected = emp_id.value;
    $.ajax({
        method: "POST",
        url: "{{ route('adminAreaPostEmployee') }}",
        data: 'emp_selected=' + emp_selected,
        success: function (data) {
            var emp_data = JSON.parse(data);
            alert(emp_data);
        }
    });
};

但是現在你會得到一個錯誤

Object 的 class Illuminate\Database\Eloquent\Builder 無法轉換為字符串

因為您試圖返回查詢構建器實例User::where('id', $select)而不是用戶記錄本身序列化

我想你可能想這樣做

public function post_employee(Request $request)
{
    $select = $request->get('emp_selected');
    return User::find($select);
}

希望這可以幫助

Answer 2

嘗試“方法”而不是“類型”。 如果您使用 1.9.0 之前的 jQuery 版本，則應使用 type

function fillEmployeeData(emp_id) {
    var emp_selected = emp_id.value;
    $.ajax({
        method: "POST",
        url: "{{ route('adminAreaPostEmployee') }}",
        data: 'emp_selected=' + emp_selected,
        success: function (data) {
            var emp_data = JSON.parse(data);
            alert(emp_data);
        }
    });
};

Answer 3

這是 laravel 的 CSRF 保護，你可以在頭部添加 csrf 元標記

<meta name="csrf-token" content="{{ csrf_token() }}">

並在腳本的頂部寫

$.ajaxSetup({
headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
   }
});