Q&A
サーバー側で500エラーになっている原因（エラーメッセージ）が出ていると思うので、開発者コンソールのネットワークタブで該当の通信の応答（レスポンス）を確認してみて下さい。
LaravelでAJAXによる非同期処理を追加したいのですが、エラーが出力されてしまい、解消できずにおります。
アドバイスお願いします。
前提・実現したいこと
LaravelでAJAX通信を実装したいです。
画面上にはチェックボックスの付いたアイテムリストと１つのボタンがあり、アイテムにチェックしてボタンをクリックするとチェックされていたアイテムが削除されるという挙動を非同期で実現したいです。
アイテムを選択してボタンをクリックすると、以下のエラーメッセージが発生しました。
発生している問題・エラーメッセージ
chromeのデベロッパーツールのコンソール
net::ERR_INCOMPLETE_CHUNKED_ENCODING 500 (Internal Server Error)
該当のソースコード
layout.blade.php
php
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="csrf-token" content="{{ csrf_token() }}"> //トークンの情報 7 <title>@yield('title')</title> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 9 <link rel="stylesheet" href="{{ asset('/css/common.css') }}"> 10</head> 11<body> 12<div class="container"> 13 @yield('content') 14</div> 15<script src="{{ asset('/js/checkbox.js') }}"></script> 16<script src="{{ asset('/js/buybtn_ajax.js') }}"></script> 17</body> 18</html>
list.blade.php
php
1@extends('../common/layout') 2 3@section('title', 'Item list') 4 5@section('content') 6 <ul> 7 @foreach($items as $item) 8 <li class="item-list" data-item-id = "{{ $item->id }}"> 9 <input type="checkbox" class="buy_check" name="deleteItems[]" value="{{ $item->id }}"> 10 <div> 11 <p>{{ $item->item_name }}</p> 12 </div> 13 </li> 14 @endforeach 15 </ul> 16 <div id="buyBtn"> 17 <input type="submit" value="buy" id="buyBtn"> 18 </div> 19@endsection
buybtn_ajax.js
js
1'use strict'; 2 3const buyButton = document.getElementById('buyBtn'); 4const itemLists = document.querySelectorAll('.item-list'); 5 6 7buyButton.addEventListener('click', ()=>{ 8 let formData = new FormData(); 9 let deleteItemIds = []; 10 11 //ボタンをクリックするとチェックが入っているアイテムのidがformDataに入る 12 itemLists.forEach(item => { 13 if(item.firstElementChild.checked){ 14 formData.append('deleteItemIds[]', item.dataset.itemId); 15 }; 16 }); 17 18 const xhr = new XMLHttpRequest(); 19 20 xhr.addEventListener("load",function(e){ 21 if (this.readyState === 4) { 22 if (this.status === 200){ 23 itemLists.forEach(item => { 24 deleteItemIds.forEach(deleteItemId => { 25 if(item.dataset.itemId == deleteItemId){ 26 item.remove(); 27 }; 28 }); 29 }); 30 }; 31 }; 32 }); 33 34 //トークン情報を取得 35 const token = document.getElementsByName('csrf-token').item(0).content; 36 37 xhr.open('POST', '/item/delete'); 38 39 //トークン情報をヘッダーに追加 40 xhr.setRequestHeader('X-CSRF-TOKEN', token); 41 42 xhr.send(formData); 43})
web.php
php
1<?php 2 3use Illuminate\Support\Facades\Route; 4 5Route::post('/item/delete', 'ItemController@delete');
itemController.php
php
1<?php 2 3namespace App\Http\Controllers; 4 5use Illuminate\Http\Request; 6use App\Http\Controllers\Controller; 7use App\Item; 8 9class ItemController extends Controller 10{ 11 public function delete(Request $deleteItemIds) 12 { 13 foreach($deleteItemIds as $deleteItem) 14 { 15 // AJAXで渡されたデータをModel経由で削除する処理をかく 16 $item = Item::findOrFail($deleteItem); 17 $item->delete(); 18 } 19 } 20} 21
試したこと
試しに一度、deleteアクションの中身をver_dump('hello!!');のみにしてみたところ、エラー表示はなくchromeのデベロッパーツールのネットワークタブのResponseにもstring(7) "hello!!"と表示されたので、コントローラーまでは行き着いていると思っています。
また、deleteアクションの中身をvar_dump($deleteItems);にしてみたところ、以下のエラーがchromeのデベロッパーツールのコンソールに表示されました。
net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK)
ですので、formDataの受け渡し周辺でコードに誤りがあるものと推測しています。
補足情報（FW/ツールのバージョンなど）
nginx/1.19.0
php-fpm/7.4.6
Laravel/7.14.1
EC2上にdockerで開発環境を構築しています。
ありがとうございます。
ネットワークタブのResponseを開いてみると"Failed to load response data"と表示されています。（質問に画像を追加しました。）
また、当該通信のStatus欄に以下の文言が出ています。
"(failed)net::ERR_INCOMPLETE_CHUNKED_ENCODING"
こちらが500エラーの原因となっているメッセージなのでしょうか。
よろしくお願いします。
500であれば、laravel側のログを見るといいのではないでしょうか。
また、「$deleteItems」をログ出力して確認するのも手かと思います。
そのエラーはLaravelのものではないです。理由は色々あるらしいのですが、原因を断言出来ないので、エラー分で調べて下さい。
https://qiita.com/_Keitaro_/items/6a3342735d3429175300 を参考にFormDataの中を確認してください。Laravel側で受け取った値の処理の仕方（変数の参照方法）が違う気がします…
ありがとうございます。
deleteアクション内で\Log::info($deleteItems);としてみたところ、laravel.logに以下の文言が出ました。
local.ERROR: Object of class Symfony\Component\HttpFoundation\ParameterBag could not be converted to string {"exception":"[object] (Error(code: 0): Object of class Symfony\\Component\\HttpFoundation\\ParameterBag could not be converted to string at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:582)
アドバイス頂いた記事を参考にもう少し調べてみたいと思います。
Log::debug でも無理でしょうか？（本当はデバッガを使うのが早くて楽なのですが）
ありがとうございます。
formDataでの値が正しく配列になっていなかったので、そちらも修正の上、Log::debugをしてみたところ、以下の様に出ました。
[2020-06-17 04:52:08] local.DEBUG: array (
'deleteItemIds' =>
array (
0 => '1',
1 => '2',
),
)
正しく配列がdeleteアクションに渡されたと思い、改めてdeleteItemIds'でforEachを実施してみたのですが、ログには相変わらず以下のエラーが出力されています。
local.ERROR: Object of class Symfony\Component\HttpFoundation\ParameterBag could not be converted to string {"exception":"[object] (Error(code: 0): Object of class Symfony\\Component\\HttpFoundation\\ParameterBag could not be converted to string at /var/www/vendor/laravel/framework/src/Illuminate/Database/Connection.php:582)
回答1件
0
ベストアンサー
'deleteItemIds'というキーの中に配列があるのなら
php
1foreach ( $deleteItemIds['deleteItemIds'] as $deleteItemId ) { 2}
レコード削除もループで繰り返すのでなく
where条件指定して1回で済ませた方がスマートかなと思いました。
投稿2020/06/17 05:06
総合スコア1857
ありがとうございます。無事、チェックされたものアイテムのみがデータベースから削除されていることが確認できました！
ただ、画面が更新されないという別の課題が出てきたので、調べてみたいと思います。
あなたの回答
tips
プレビュー
