Ajaxの通信でパラメーターデータの送受信する方法 | Laravel / jQuery

jQueryを利用したAjaxの通信でデータの送受信方法を解説していきます。

Laravelにて処理しています。
今回は、LaravelでjQueryを利用する方法などは省略しております。パラメーターデータを送受信する方法に限定しております。また、LaravelでのAjax×jQury処理の全貌をまとめたいと思います。

方法としては１パターンあります。

①：URLに含める
②：Requestに含める

今回は、②：Requestに含める　で進めたいと思います。

データ送信 / 受信

$.ajaxのパラメータのdataを利用していきます。

①：Ajaxの処理

今回のポイントはdataパラメーターです。

①-1：//–①

・idがedit_commentを含む要素をクリックされた際にイベント発火します。

①-2：//–②

・HTMLでdata-id=”XXXX”　のXXXXの情報を取得します。　※後述

①-3：//–③

comment_id　という名目で、　comment_id　//–②　のデータを送信します。　$request->comment_id　でデータ取得します。　　※後述

$( function ()
{
    $(document).on('click', '[id^=edit_comment]', function(){ //--①

        var comment_id =  $(this).data('id'); //--②
        
        $.ajax({
            type: "get",
            url: "/comment/get",
            data : {
                comment_id:comment_id, //--③
            },
            cache: false,
            dataType: 'json',
        })
        .done((res)=>{
  　　　　　　　　　　　　　　　console.log( res ); //--成功した時
          })
        .fail((error)=>{
　　　  　　　　　　　　　　　　console.log( error ); //--失敗した時
          });
    });
})

②：Laravelのルーティング処理

①-1でクリックした際に発火したAjaxイベントに対してルーティング処理してくれる部分です。

url: “/comment/get”,　なので、Route::get(‘/comment/get’　でgetで処理します。

web.php

Route::get('/comment/get', [CommentController::class, 'commentget'])->name('comment.get');

③：Contoroller / Ajaxからデータ受信

ルーティング処理で呼び出された、CommenntControllerのcommentgetで処理を書いていきます。

CommentController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use App\Models\Comment;

class CommentController extends Controller
{
    public function commentget(Request $request)
    {
        $comment_id = $request->comment_id; // --①
        $comment = Comment::where('id', $comment_id)->get()->get();
        return $comment; // --②
    }
}

③-1：//–①

①-1：//–① で設定したcomment_idのデータを受け取ります。
・$request->comment_id

③-2：//–②

retuen　で $coomentを　Ajaxに返します。

問題なく処理出来ていれば、下記の部分でconsoleに$commentが出力されます。

        .done((res)=>{
  　　　　　　　　　　　　　　　console.log( res ); //--成功した時
          })