個人メモ。
環境
- Laravel 10.4.1
- PHP 8.2.4
やること
削除画面（一覧画面→遷移しての削除画面）で、todoテーブルの特定の1レコード（その画面に表示）を削除する。
削除時に確認メッセージ表示、OKなら削除し、一覧画面に遷移する。
設定内容
- viewファイルの中身、jQuery部分。
ここでは、コントローラーから渡ってきた$form->idをキーとして渡してデータを削除する。
ボタンIDに「del_js」と名前を付けて、そのクリックイベントで実行する。
jQueryのfunction内では、url: "/todo/del",、type: "POST",で、web.phpのルーティングの"/todo/del"のPOSTを呼び出す。削除対象データは
data: { id: {{ $form->id }}, },
のように指定した。
下記は削除画面のviewファイル。
todo_del.blade.php
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(function() {
$("#del_js").click(function() {
var deleteConfirm = confirm('削除してよろしいですか？');
if(deleteConfirm == true) {
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),},
});
$.ajax({
//POST通信
type: "POST",
//ここでデータの送信先URLを指定します。
url: "/todo/del",
dataType: "text",
data: {
id: {{ $form->id }},
},
})
// 成功
.done(function (results){
// alert('成功:' + {{ $form->id }});
// 通信成功時の処理
console.log("results : " + results);
window.location.href = "/todo"; //削除後に画面を遷移
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown){
//alert('失敗');
console.log("ajax通信に失敗しました");
console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得
console.log("textStatus : " + textStatus); // タイムアウト、パースエラー
console.log("errorThrown : " + errorThrown.message); // 例外情報
console.log("URL : " + url);
});
}
});
});
</script>
（略）
<p class="center"><input type="button" id="del_js" value="削除" ></p>
（略）
- routeの設定
'todo/del'がjQueryでPOSTで呼び出された場合、TodoControllerのremove関数を呼び出すようにする。
web.php
Route::post('todo/del','App\Http\Controllers\TodoController@remove'); //jQueryでの削除
- TodoControllerのremove関数
呼び出されるTodoControllerのremove関数。
$request->idで指定されたtodoテーブルの1レコードを削除する。
TodoController.php
use Illuminate\Http\Request;
use App\Models\Todo;
class TodoController extends Controller
{
public function remove(Request $request){
// eloquentによる削除
$todo = Todo::find($request->id); //todoモデルを使用、IDで検索
$todo->delete();
return redirect('/todo');
} //end funtion remove
}
これで動作確認ができました。
関連
Laravel、jQueryで複数のチェックボックスデータを非同期（Ajax）削除する
参考
Laravel+jQueryでAjax通信してみる
[Laravel / jQuery] 非同期（Ajax）でレコードを削除したい
Ajax入門（通信エラーとなった原因の取得）
jQueryのajaxが成功しているのにfailで処理される現象の原因と対応方法を解説 | 試行錯誤してみた。