Laravel

【Laravel】非同期通信でテーブルデータを検索し取得表示する方法【ajax、response()->json】

  /

Laravelと非同期通信ajaxを使って、入力したIDでテーブルを検索し取得したデータを表示する方法をご紹介します。（Laravelバージョン6系）

Contents

非同期通信でID検索するテーブル構造

以下のusersテーブルを用意します。

usersテーブル

名前 説明
id 主キー
user_name 名前

usersテーブルのテーブルデータ用Modelの記述

※User.phpファイルを用意します。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{

}
?>

非同期通信でテーブルデータを検索し取得表示するID検索ページのviewの記述

※users.blade.phpファイルを用意します。IDを検索し検索結果として名前を出力表示するページです。

入力フォーム箇所の記述

※ID検索テキストボックス（user_id）と検索結果（名前）テキストボックス（user_name）を用意します。

<div>
	<label for="user_id">ID検索</label>
	<input type="text" id="user_id" name="user_id" value="">

	<label for="user_name">名前</label>
	<input type="text" id="user_name" name="user_name" value="">
</div>

ajax（非同期通信）箇所の記述

※jquery-3.6.1.min.js”ファイルを読み込みます。ID検索テキストボックス（user_id）が入力されたら入力値（value）を取得し、ajaxを使ってuser_idを検索パラメータ（id）として渡します。
ajaxからjsonデータが取得成功したら、検索結果（名前）テキストボックス（user_name）にIDと一致した検索結果の名前を出力します。

<script src="jquery-3.6.1.min.js" defer></script>
<script type="text/javascript">
$(function () {
var userid = "";
//done処理時にID検索テキストボックスのthisを使用するためuseridに保存
function fncasyncid(event) {
  userid = event;
}

$('#user_id').on('change',function(){

    var id = $(this).val();

    fncasyncid(this);

    $.ajax({
      url: './users?id='+id,
      type: 'GET',
      dataType: "json",
    }).done(function (data) {
      // 取得成功
      //取得jsonデータ
      var data_stringify = JSON.stringify(data);
      var data_json = JSON.parse(data_stringify);

      //jsonデータから各データを取得
      var id = "";
      var user_name = "";

      if (data_json[0] != null){
        id = data_json[0]["id"];
        user_name = data_json[0]["user_name"];
      }

      $(userid).next('input').val(user_name);

    }).fail(function (data) {
      // 取得失敗
      alert('データ取得出来ませんでした。');
    });
});

});
</script>

Routeの記述

※ajaxからGETリクエストするURLです。必要に応じて変更して下さい。

//非同期ID検索
Route::get('/users', 'UsersController@index');

非同期通信でテーブルデータを検索し取得表示するControllerの記述

※ajaxでパラメータとして渡されたidを使ってusersテーブルからid検索しuser_nameをjson形式で出力するUsersController.phpを用意します。

Userモデルの読込

namespace App\Http\Controllers;
use Illuminate\Http\Request;

use App\User;   //Userモデルを使用
use DB;

class UsersController extends Controller
{

    //ID検索結果出力
    public function index(Request $request)
    {
        $users = "";
	//usersテーブルからidが一致するidとuser_nameを取得
        $users = DB::select("SELECT users.id, users.user_name FROM users WHERE users.id = ".$request->id);

	//HTTPヘッダー（application/json）も含めjson形式で返す
        return response()->json($users);
    }

}

　
　
※流用される場合は自己責任でお願いします。

json Ajax 非同期通信 Laravel
関連記事