質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

1569閲覧

Ajaxで検索ができない

reina0609

総合スコア16

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/07/02 15:13

編集2019/07/03 15:20

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

php artisan route:listの結果です。ルーティングはできています。
イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2019/07/03 00:07

「Ajaxで」だとURLは変わりませんが、どういった意図でそうしたいのでしょうか。
退会済みユーザー

退会済みユーザー

2019/07/03 02:51 編集

特に意図はありませんが、「PHP」ではURLが変わるので、Ajaxの場合もURLを変えた方がいいのでは、と思いました。
m.ts10806

2019/07/03 02:24

なぜ質問した人と別の人が答えているのか分かりませんが、 同一人物による複数アカウント保持は規約違反ですよ。
reina0609

2019/07/03 03:02

失礼いたしました。気づかないうちに、アカウントを2つ作ってしまっていたようでした。退会処理済みですので、ご容赦ください。
guest

回答1

0

ベストアンサー

元のルーティングだと GET /products エンドポイントが重複しているので、一覧表示時も getSearchByProduct に入っていると思われます。

getSearchByProduct はAPIなので、 /routes/api.php にprefix付きで定義してはどうでしょうか。

api.php

php

1Route::group(['prefix' => 'v1', 'namespace' => 'Api'], function() { 2 Route::get('/products', 'ProductController@getSearchByProduct'); 3});

view

php

1 $.ajax({ 2 type: 'get', 3 url: '/api/v1/products', 4 // 略

投稿2019/07/03 00:50

編集2019/07/04 02:29
tomoeine

総合スコア127

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

reina0609

2019/07/03 14:28

tomoeineさん、コメントありがとうございます! prefixを用いたルーティングの設定で Route::group を使用すると一括して定義することができるんですね!知りませんでした。 tomoeineさんのアドバイスを参考に、再度書き換えてみたのですが、やはり検索結果が表示されません。(送信をクリックしても画面が変化しません)ajaxのコードが間違えていると思うのですが、再度ご意見いただけますでしょうか?
tomoeine

2019/07/04 02:30

あああすみません、Ajaxのリクエスト先が間違ってましたので修正しましたm(_ _)m 修正していただいたコード拝見したのですが、ルーティングとview内の `vi` → `v1` の誤植でしょうか?
reina0609

2019/07/04 13:00 編集

修正、コメントいただきありがとうございます!viとv1は見間違えていました(^◇^;) 無事、ajaxを用いて検索機能が実装できました( ;∀;) 本当にありがとうございました!
tomoeine

2019/07/06 01:40

おおおお、無事解決おめでとうございます!お力になれてよかったです!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問