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 ); //--成功した時
})
