teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問Ajaxで検索ができない

編集履歴

質問編集履歴

7

追加の情報

2019/07/03 15:20

投稿

reina0609
reina0609

スコア16

test CHANGED
@@ -1 +1 @@
1
- Ajaxで検索機能を実装したいです。
1
+ Ajaxで検索ができない
test CHANGED
@@ -24,7 +24,7 @@
24
24
 
25
25
 
26
26
 
27
- localhost/productsでは検索ワードを入力し、送信をクリックしても、一覧表示画面から全く変化しません。
27
+ localhost/productsでは検索ワード（データベースに登録している商品データに一致するもの）を入力し、送信をクリックしても、ajax通信失敗時の処理(index.brade.phpの<script>のerror)が行われてしまいます。
28
28
 
29
29
  　
30
30
 

6

誤字

2019/07/03 15:20

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
@@ -226,6 +226,6 @@
226
226
 
227
227
 
228
228
 
229
- #php artisan route:listの結果です。ルーティングはできています。
229
+ php artisan route:listの結果です。ルーティングはできています。
230
230
 
231
231
  ![イメージ説明](8746d001289882070a58aa2373f10b83.png)

5

画像の追加

2019/07/03 14:59

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
@@ -223,3 +223,9 @@
223
223
 
224
224
 
225
225
  ```
226
+
227
+
228
+
229
+ #php artisan route:listの結果です。ルーティングはできています。
230
+
231
+ ![イメージ説明](8746d001289882070a58aa2373f10b83.png)

4

コードの修正

2019/07/03 14:54

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
@@ -24,17 +24,9 @@
24
24
 
25
25
 
26
26
 
27
- localhost/productsでは
27
+ localhost/productsでは検索ワードを入力し、送信をクリックしても、一覧表示画面から全く変化しません。
28
-
29
-
30
-
31
- {"products":[]}
28
+
32
-
33
-
34
-
35
- のみ表示されています。
29
+ 　
36
-
37
-
38
30
 
39
31
  ### 該当のソースコード
40
32
 
@@ -50,59 +42,77 @@
50
42
 
51
43
 
52
44
 
45
+ ```
46
+
47
+
48
+
49
+ api.php
50
+
51
+ ```PHP
52
+
53
53
  //検索機能
54
54
 
55
+ Route::group(['prefix' => 'vi'], function() {
56
+
55
- Route::get('/products', 'ProductController@getSearchByProduct');
57
+ Route::get('/products', 'Ajax\SearchController@getSearchByProduct');
58
+
56
-
59
+ });
60
+
57
- ```
61
+ ```
58
-
59
-
60
-
62
+
63
+
64
+
61
- ProductController.php
65
+ Ajax\SearchController.php
62
66
 
63
67
  ```PHP
64
68
 
69
+ namespace App\Http\Controllers\Ajax;
70
+
71
+
72
+
73
+ use App\Product;
74
+
75
+ use Illuminate\Http\Request;
76
+
77
+ use App\Http\Controllers\Controller;
78
+
79
+
80
+
81
+ class SearchController extends Controller
82
+
83
+ {
84
+
85
+ //検索機能
86
+
65
- public function index()
87
+ public function getSearchByProduct(Request $request)
66
88
 
67
89
  {
68
90
 
91
+ //検索した値を取得
92
+
93
+ $search = $request->search;
94
+
95
+
96
+
97
+ //検索した値と商品タイトルに一致するデータを取得
98
+
99
+ $products = Product::where('name', $search)->get();
100
+
101
+
102
+
69
- //productsテーブル全カラム
103
+ //レスポンスをjson形式で返す
70
-
71
- $products = Product::all();
104
+
72
-
73
-
74
-
75
- return view('products.index',[
105
+ return response()->json([
76
106
 
77
107
  'products' => $products,
78
108
 
109
+ 'search' => $search,
110
+
79
111
  ]);
80
112
 
81
113
  }
82
114
 
83
-
84
-
85
- public function getSearchByProduct(Request $request)
86
-
87
- {
88
-
89
- //検索した値を取得
90
-
91
- $search = $request->input('search');
92
-
93
-
94
-
95
- //検索した値と商品タイトルに一致するデータを取得
96
-
97
- $products = Product::where('name', $search)->get();
98
-
99
-
100
-
101
- //レスポンスをjson形式で返す
102
-
103
- return response()->json(['products' => $products]);
104
-
105
- }
115
+ }
106
116
 
107
117
  ```
108
118
 
@@ -176,7 +186,7 @@
176
186
 
177
187
  type: 'get',
178
188
 
179
- url: '/products',
189
+ url: 'vi/products',
180
190
 
181
191
  dataType: 'json',
182
192
 
@@ -186,11 +196,11 @@
186
196
 
187
197
  },
188
198
 
189
- success: function (data) {
199
+ success: function () {
190
200
 
191
201
  //通信成功時の処理
192
202
 
193
- $('.js-get-product').html(data);
203
+ $('.js-get-product').html('成功');
194
204
 
195
205
  },
196
206
 
@@ -213,43 +223,3 @@
213
223
 
214
224
 
215
225
  ```
216
-
217
-
218
-
219
- ### 試したこと
220
-
221
- web.php
222
-
223
- ```PHP
224
-
225
- //一覧表示画面表示
226
-
227
- Route::get('/products', 'ProductController@index')->name('products.index');
228
-
229
-
230
-
231
- //検索機能
232
-
233
- //Route::get('/products', 'ProductController@getSearchByProduct');
234
-
235
- Route::get('/product', 'ProductController@getSearchByProduct');
236
-
237
- ```
238
-
239
- web.phpのURIを'products'から'product'に変更したところ、一覧表示画面は表示されたました。
240
-
241
- 検索機能のURIを変えるべきなのでしょうか？
242
-
243
-
244
-
245
- 検索した時に、'/products?search='となるようにしたいです。
246
-
247
-
248
-
249
-
250
-
251
- ### 補足情報（FW/ツールのバージョンなど）
252
-
253
-
254
-
255
- ここにより詳細な情報を記載してください。

3

タグの追加

2019/07/03 14:23

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

2

初心者アイコンの追加

2019/07/02 15:34

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

1

質問文の修正

2019/07/02 15:30

投稿

reina0609
reina0609

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,7 +8,9 @@
8
8
 
9
9
  PHP（Laravel）で、商品データの掲載ができるAPIを作成しており、
10
10
 
11
- JavascriptのAjaxを用いて、商品検索機能を実装しているのですが、
11
+ JavascriptのAjaxを用いて、
12
+
13
+ 商品検索機能（検索したワード（例:スカート）に一致する商品を表示させる）を実装しているのですが、
12
14
 
13
15
  うまくいかないため、ご意見いただけますでしょうか？
14
16
 
@@ -84,14 +86,20 @@
84
86
 
85
87
  {
86
88
 
89
+ //検索した値を取得
90
+
87
91
  $search = $request->input('search');
88
92
 
89
93
 
90
94
 
95
+ //検索した値と商品タイトルに一致するデータを取得
96
+
91
97
  $products = Product::where('name', $search)->get();
92
98
 
93
99
 
94
100
 
101
+ //レスポンスをjson形式で返す
102
+
95
103
  return response()->json(['products' => $products]);
96
104
 
97
105
  }