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="https://dad-union.sakura.ne.jp/laravel/cms/public/js/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); } }
※流用される場合は自己責任でお願いします。