今回はAjaxを使ってデータの取得を実装したいと思います。
データの準備
まずはuserのデータを作成します。
Userのテーブルに関しては元からあるmigrationファイルを使用します。
// database/migrations/xxxx_xx_xx_xxxxxx_create_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
ダミーデータを作成するためにSeederを作成します。
userのidが1~10のuserを作成します。
php artisan make:seeder UserSeeder
Seederを編集してDatabaseSeeder.phpにUserSeederを登録します。
// database/seeds/UserSeeder.php
<?php
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
class UserSeeder extends Seeder
{
/**
* Run the database seeds.
*
* @return void
*/
public function run()
{
for ($i = 1; $i <= 10; $i++) {
$data = [
'name' => 'name' . $i,
'email' => 'email' . $i,
'password' => 'test123' . $i,
];
DB::table('users')->insert([$data]);
}
}
}
// database/seeds/DatabaseSeeder.php
<?php
use Illuminate\Database\Seeder;
class DatabaseSeeder extends Seeder
{
/**
* Seed the application's database.
*
* @return void
*/
public function run()
{
$this->call('UserSeeder');
}
}
ここまでできたら以下のコマンドを実行してテーブルの作成とダミーデータの生成を行います。
php artisan migrate --seed
Ajaxの実装
今回は2つのリンクを用意して、それに応じてとってくる値を変える処理を実装します。
AjaxのGetを用いて取得します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("a").on('click',
function() {
let id = $(this).attr("id");
// alert(id);
$.ajax({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'GET',
url: '/user/get_users', // url: は読み込むURLを表す
dataType: 'json', // 読み込むデータの種類を記入
data: {
id: id //request で渡す時の名前
},
}).done(function(results) {
// 通信成功時の処理
console.log(results);
// idを取得してアラート表示
let values = [];
$.each(results,function(key,value){
values.push(value.id);
});
alert(values);
}).fail(function(err) {
// 通信失敗時の処理
alert('ファイルの取得に失敗しました。');
});
}
);
});
</script>
</head>
<body>
<p>
<a id="or_less_5" href="#">idが5以下</a>
</p>
<p>
<a id="or_more_6" href="#">idが6以上</a>
</p>
</body>
</html>
Getを投げた先のルーティングとコントローラーに記述します。
// app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;
class UserController extends Controller
{
public function index()
{
return view('user.index');
}
public function getUsers(Request $request)
{
if($request->id === 'or_less_5'){
$users = DB::table('users')->where('id','<=',5)->get();
return response()->json($users);
}
if($request->id === 'or_more_6'){
$users = DB::table('users')->where('id','>=',6)->get();
return response()->json($users);
}
return abort(403);
}
}
//routes/web.php
Route::get('/', function () {
return view('welcome');
});
Route::get('user','UserController@index');
Route::get('/user/get_users','UserController@getUsers');
実装結果
idが5以下を押すとidが1~5の番号を取得します。

今回使用したコード
https://github.com/kt5007/laravel-ajax
参考文献
書籍
レームワークLaravel Webアプリケーション開発 バージョン8.x対応