Ajaxで検索機能を実装したいです。
閲覧いただきありがとうございます。
PHP(Laravel)で、商品データの掲載ができるAPIを作成しており、
JavascriptのAjaxを用いて、
商品検索機能(検索したワード(例:スカート)に一致する商品を表示させる)を実装しているのですが、
うまくいかないため、ご意見いただけますでしょうか?
一覧表示画面(/products)上に検索欄を表示させています。
発生している問題・エラーメッセージ
localhost/productsでは検索ワード(データベースに登録している商品データに一致するもの)を入力し、送信をクリックしても、ajax通信失敗時の処理(index.brade.phpの<script>のerror)が行われてしまいます。
該当のソースコード
web.php
PHP
1//一覧表示画面表示 2Route::get('/products', 'ProductController@index')->name('products.index'); 3
api.php
PHP
1//検索機能 2Route::group(['prefix' => 'vi'], function() { 3 Route::get('/products', 'Ajax\SearchController@getSearchByProduct'); 4});
Ajax\SearchController.php
PHP
1namespace App\Http\Controllers\Ajax; 2 3use App\Product; 4use Illuminate\Http\Request; 5use App\Http\Controllers\Controller; 6 7class SearchController extends Controller 8{ 9 //検索機能 10 public function getSearchByProduct(Request $request) 11 { 12 //検索した値を取得 13 $search = $request->search; 14 15 //検索した値と商品タイトルに一致するデータを取得 16 $products = Product::where('name', $search)->get(); 17 18 //レスポンスをjson形式で返す 19 return response()->json([ 20 'products' => $products, 21 'search' => $search, 22 ]); 23 } 24}
HTML
1@extends('layout') 2 3@section('content') 4 <form method="get" action="" class="formArea"> 5 <div id="ajaxArea"> 6 <input type="text" name="search" class="inputText js-get-val-search"> 7 <input type="submit" value="送信" class="btn"> 8 </div> 9 </form> 10 11 <ul> 12 <li><a href={{ route('products.create') }}>商品登録</a></li> 13 </ul> 14 15 <div class="js-get-product"> 16 @foreach($products as $product) 17 <a href={{ route('products.show', ['product' => $product->id]) }}>{{ $product->name }}<br></a> 18 <img src="{{ asset('/storage/pic/'.$product->pic) }}"> 19 @endforeach 20 </div> 21 22@endsection 23<script 24 src="https://code.jquery.com/jquery-3.4.1.js" 25 integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" 26 crossorigin="anonymous"></script> 27<script> 28 $(function() { 29 $('.formArea').on('submit', function (e) { 30 e.preventDefault(); 31 32 $.ajax({ 33 type: 'get', 34 url: 'vi/products', 35 dataType: 'json', 36 data: { 37 search: $('.js-get-val-search').val() 38 }, 39 success: function () { 40 //通信成功時の処理 41 $('.js-get-product').html('成功'); 42 }, 43 error: function () { 44 //通信失敗時の処理 45 $('.js-get-product').html('検索に一致するものはありませんでした'); 46 } 47 }); 48 }); 49 }); 50</script> 51
回答1件
あなたの回答
tips
プレビュー