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);
}
}
※流用される場合は自己責任でお願いします。
ディスプレイ広告
ディスプレイ広告