LaravelでAjaxのGetを使う

今回はAjaxを使ってデータの取得を実装したいと思います。

Contents

データの準備
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の実装

今回は２つのリンクを用意して、それに応じてとってくる値を変える処理を実装します。

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');