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

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

ただいまの
回答率

87.34%

Ajaxで検索ができない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 818

score 16

Ajaxで検索機能を実装したいです。

閲覧いただきありがとうございます。

PHP(Laravel)で、商品データの掲載ができるAPIを作成しており、
JavascriptのAjaxを用いて、
商品検索機能(検索したワード(例:スカート)に一致する商品を表示させる)を実装しているのですが、
うまくいかないため、ご意見いただけますでしょうか?

一覧表示画面(/products)上に検索欄を表示させています。

発生している問題・エラーメッセージ

localhost/productsでは検索ワード(データベースに登録している商品データに一致するもの)を入力し、送信をクリックしても、ajax通信失敗時の処理(index.brade.phpの<script>のerror)が行われてしまいます。
 

該当のソースコード

web.php

//一覧表示画面表示
Route::get('/products', 'ProductController@index')->name('products.index');

api.php

//検索機能
Route::group(['prefix' => 'vi'], function() {
    Route::get('/products', 'Ajax\SearchController@getSearchByProduct');
});

Ajax\SearchController.php

namespace App\Http\Controllers\Ajax;

use App\Product;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;

class SearchController extends Controller
{
    //検索機能
    public function getSearchByProduct(Request $request)
    {
        //検索した値を取得
        $search = $request->search;

        //検索した値と商品タイトルに一致するデータを取得
        $products = Product::where('name', $search)->get();

        //レスポンスをjson形式で返す
        return response()->json([
            'products' => $products,
            'search' => $search,
        ]);
    }
}
@extends('layout')

@section('content')
    <form method="get" action="" class="formArea">
        <div id="ajaxArea">
            <input type="text" name="search" class="inputText js-get-val-search">
            <input type="submit" value="送信" class="btn">
        </div>
    </form>

    <ul>
        <li><a href={{ route('products.create') }}>商品登録</a></li>
    </ul>

     <div class="js-get-product">
         @foreach($products as $product)
         <a href={{ route('products.show', ['product' => $product->id]) }}>{{ $product->name }}<br></a>
         <img src="{{ asset('/storage/pic/'.$product->pic) }}">
         @endforeach
      </div>

@endsection
<script
    src="https://code.jquery.com/jquery-3.4.1.js"
    integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
    crossorigin="anonymous"></script>
<script>
    $(function() {
        $('.formArea').on('submit', function (e) {
            e.preventDefault();

            $.ajax({
                type: 'get',
                url: 'vi/products',
                dataType: 'json',
                data: {
                    search: $('.js-get-val-search').val()
                },
                success: function () {
                    //通信成功時の処理
                    $('.js-get-product').html('成功');
                },
                error: function () {
                    //通信失敗時の処理
                    $('.js-get-product').html('検索に一致するものはありませんでした');
                }
            });
        });
    });
</script>

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/07/03 09:07

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

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2019/07/03 09:56 編集

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

    キャンセル

  • m.ts10806

    2019/07/03 11:24

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

    キャンセル

  • reina0609

    2019/07/03 12:02

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

    キャンセル

回答 1

checkベストアンサー

+3

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

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

api.php

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

view

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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/03 23:28

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

    キャンセル

  • 2019/07/04 11:30

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

    キャンセル

  • 2019/07/04 21:59 編集

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

    キャンセル

  • 2019/07/06 10:40

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

    キャンセル

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る