前提・実現したいこと
PHP(laravel)で非同期通信の検索機能を作りたいです。
jqueryの導入ができなかったため、JavaScriptのXMLHttpRequestを使っています。
controllerの処理で、jsonデータを返すというところまでは分かったので、
JavaScript側でそのjsonを受け取ってcontrollerの処理結果をviewに返すという処理をやりたいです。
JavaScript側でjsonを受け取るためには、「xhr.responseType = 'json';」と記述する必要がある、というところまでは理解しているつもりです。
しかし、受け取りに成功しているかも分からず、どういう風にcontrollerの処理結果をviewに返せばよいかも分かりません。
上記について、知見がある方ご教授してくださると幸いです。
拙い文章で申し訳ないですがよろしくお願いいたします。
<list.blade.php>
<div class="form-group"> <form id="search"> <input type="text" name="keyword" value="@if (isset( $keyword )) @endif" id="keyword" placeholder="キーワード入力" > <input type="button" id="search-icon" value="検索" onclick="buttonClick()"> </form> </div>
<Controller.php>
public function getSearch(Request $request) { // キーワードを取得 $keyword = $request->input('keyword'); //クエリ作成 $query = Blog::query(); //キーワードが入力されている場合 if(!empty($keyword)){ $query->where('title', 'like', '%'.$keyword.'%') ->orWhere('body','like','%'.$keyword.'%'); } // 検索結果を5件ごとに表示 $blogs = $query->paginate(5); // 検索結果をブログ一覧に表示 return response()->json(['blogs' => $blogs]); //($blogs); }
<search.js>
function buttonClick() { const table = document.querySelector('#table').innerHTML = ''; const textbox = document.forms.search.keyword.value; if (!textbox) { return false; } var xhr = new XMLHttpRequest(); xhr.open('GET', '/search', true); xhr.responseType = 'json'; xhr.send(null); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { alert("通信に成功しました"); // 通信が成功したらControllerの処理結果をview返したい } else { alert("通信に失敗しました"); }; }; };
<web.php>
//検索機能 Route::get('/search', [BlogController::class, 'getSearch'])->name ('search');
試したこと
・console.logやchromeのデバッグツールを使用して、jsonが受け取れているか確認したが
成功しているか不明。
・<search.js>の記述を以下のようにしてみましたが、elseの処理結果のみ反映されます。
function buttonClick() { const table = document.querySelector('#table').innerHTML = ''; const textbox = document.forms.search.keyword.value; if (!textbox) { return false; } var xhr = new XMLHttpRequest(); xhr.open('GET', '/search', true); xhr.responseType = 'json'; xhr.send(null); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { (function (data) { data.forEach(function (value) { let id = value.id; let title = value.title; let updated_at = value.updated_at; table.innerhtml = ` <tr> <td>${id}</td> <td><a href="/blog/${id}">${title}</a></td> <td>${updated_at}</td> </tr> `; }); }); elseif(data === 0) table.innerhtml = `<p>検索結果がありません</p>`; } else { alert("通信に失敗しました"); }
補足情報(FW/ツールのバージョンなど)
MAMPのバージョンは6.0.1(986)
VScodeバージョン: 1.52.1
laravelのバージョンは8です。
回答1件
あなたの回答
tips
プレビュー