teratail
回答率
87.20%
質問するログイン新規登録
トップに関する質問Laravelで非同期通信

編集履歴

質問編集履歴

6

解決

2019/07/22 17:22

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -216,7 +216,7 @@
216
216
 
217
217
  ```
218
218
 
219
- ###追加
219
+ ###追加(index.blade.php修正しています)
220
220
 
221
221
  ①src="{{ asset('/storage/pic/'.$product->pic) }}"部分について
222
222
 

5

説明の追加

2019/07/22 16:20

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -218,7 +218,7 @@
218
218
 
219
219
  ###追加
220
220
 
221
- ①
221
+ ①src="{{ asset('/storage/pic/'.$product->pic) }}"部分について
222
222
 
223
223
  ```PHP
224
224
 
@@ -234,7 +234,7 @@
234
234
 
235
235
  ```
236
236
 
237
- を使うのはわかるのですが、asset('/storage/pic/')とどのようにつければいいのでしょうか？
237
+ を使うのはわかるのですが、文法的なことだとは思いますが、asset('/storage/pic/')とdata[i].picをどのように繋げればいいのでしょうか？
238
238
 
239
239
 
240
240
 
@@ -244,8 +244,16 @@
244
244
 
245
245
  なぜこのような結果になるのか、全くわからず困っております。
246
246
 
247
+
248
+
249
+ 検索結果
250
+
247
251
  ![イメージ説明](32c88d930dc1e5a322cee74c74335483.png)
248
252
 
253
+ console.log(data)
254
+
255
+ ![console.log(data)](bea206aba60c7dfa32a8a46c3493c7b2.png)
256
+
249
257
 
250
258
 
251
259
  追加で申し訳ございませんが、回答よろしくお願いします。

4

画像の追加

2019/07/22 16:07

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -30,7 +30,7 @@
30
30
 
31
31
 
32
32
 
33
- ③画像が最後に一致するデータのものになってしまいます（上の画像参照）
33
+ ③画像が最後に一致するデータのものになってしまいます
34
34
 
35
35
 
36
36
 
@@ -215,3 +215,37 @@
215
215
  </script>
216
216
 
217
217
  ```
218
+
219
+ ###追加
220
+
221
+ ①
222
+
223
+ ```PHP
224
+
225
+ $product->pic
226
+
227
+ ```
228
+
229
+ を使わずに、画像の表示をさせるにはどうしたらいいのでしょうか？
230
+
231
+ ```PHP
232
+
233
+ data[i].pic
234
+
235
+ ```
236
+
237
+ を使うのはわかるのですが、asset('/storage/pic/')とどのようにつければいいのでしょうか？
238
+
239
+
240
+
241
+ ②検索に一致したデータが２つなのに、３つ表示されてしまいます。
242
+
243
+ console.log(data)で確認しましたが、２つ条件に一致している場合、以下の画像のように結果が表示されてしまいます。
244
+
245
+ なぜこのような結果になるのか、全くわからず困っております。
246
+
247
+ ![イメージ説明](32c88d930dc1e5a322cee74c74335483.png)
248
+
249
+
250
+
251
+ 追加で申し訳ございませんが、回答よろしくお願いします。

3

追加

2019/07/22 16:02

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -156,42 +156,56 @@
156
156
 
157
157
  //通信成功時の処理
158
158
 
159
+ //alert(data);
160
+
161
+ $(".index-product").empty();
162
+
163
+ $(".index-product").remove();
164
+
165
+ var len = data.length;
166
+
167
+ if(len === 0){
168
+
169
+ $(".js-MsArea").html('検索に一致する商品がありませんでした');
170
+
171
+ }else{
172
+
173
+ console.log(data);
174
+
175
+ $(".js-MsArea").html('検索に一致する商品がありました');
176
+
177
+ for (var i = 0; i < len; i++) {
178
+
179
+ $(".js-get-product").append($('<div class="index-product">'));
180
+
181
+ $(".index-product").append($("<img>").attr({
182
+
183
+ "src": text(data[i].pic),
184
+
185
+ "class": 'index-img',
186
+
187
+ }));
188
+
189
+ $(".index-product").append($("<a>").text(data[i].name).attr({
190
+
191
+ "class" : 'product-name',
192
+
193
+ "id": 'name',
194
+
195
+ "href": '{{ route('products.show', ['product' => $product->id]) }}',
196
+
197
+ }));
198
+
199
+ }
200
+
201
+ }
202
+
203
+ }).fail(function (data) {
204
+
205
+ //通信失敗時の処理
206
+
159
207
  alert(data);
160
208
 
161
- $(".js-MsArea").html('検索に一致する商品がありました');
162
-
163
- var len = data.length;
164
-
165
- for (var i = 0; i < len; i++) {
166
-
167
- $('.js-remove-product').remove();
168
-
169
- $('.js-get-product').append($("<a>").attr({
170
-
171
- "class" : 'product-name',
172
-
173
- "id": 'name',
174
-
175
- "href": '{{ route('products.show', ['product' => $product->id]) }}'
176
-
177
- }));
178
-
179
- $('.js-get-product').append($("<img>").attr({
180
-
181
- "src": '{{ asset('/storage/pic/'.$product->pic) }}',
182
-
183
- "class": 'index-img',
184
-
185
- }));
186
-
187
- }
188
-
189
- }).fail(function (data) {
190
-
191
- //通信失敗時の処理
192
-
193
- alert(data);
194
-
195
209
  });
196
210
 
197
211
  });

2

追加の情報

2019/07/22 15:54

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -14,17 +14,27 @@
14
14
 
15
15
  index.blade.phpのappendが原因なのはわかりますが、どう書き換えれば期待する結果が得られるでしょうか？
16
16
 
17
+ 例）①ニットと検索→②もう一度ニットと検索
18
+
19
+ ![①ニットと検索](109687aba185d4a483ade3b25dfdfe89.png)
20
+
21
+ ![②もう一度ニットと検索](5f5baa4e1af298b40a563697c666511a.png)
22
+
17
23
 
18
24
 
19
25
  ②一文字一致でも表示されてしまう
20
26
 
21
- 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」が含まれている場合でも、表示されてしまいます。
27
+ 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」（小文字でも大文字でも検索に引っかかっています）が含まれている場合でも、表示されてしまいます。
22
28
 
23
29
  単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。
24
30
 
25
31
 
26
32
 
33
+ ③画像が最後に一致するデータのものになってしまいます（上の画像参照）
34
+
35
+
36
+
27
- ③商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
37
+ ④商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
28
38
 
29
39
  ```PHP
30
40
 

1

追加情報

2019/07/22 06:31

投稿

reina0609
reina0609

score0

test CHANGED
File without changes
test CHANGED
@@ -14,27 +14,17 @@
14
14
 
15
15
  index.blade.phpのappendが原因なのはわかりますが、どう書き換えれば期待する結果が得られるでしょうか？
16
16
 
17
- 例）①ニットと検索→②もう一度ニットと検索
18
-
19
- ![①ニットと検索](109687aba185d4a483ade3b25dfdfe89.png)
20
-
21
- ![②もう一度ニットと検索](5f5baa4e1af298b40a563697c666511a.png)
22
-
23
17
 
24
18
 
25
19
  ②一文字一致でも表示されてしまう
26
20
 
27
- 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」or「ッ」（小文字でも大文字でも検索に引っかかっています）が含まれている場合でも、表示されてしまいます。
21
+ 例）「ドットスカート」という商品が登録されている場合、一文字「ツ」が含まれている場合でも、表示されてしまいます。
28
22
 
29
23
  単語として「スカート」と検索した場合にのみ結果が表示されて欲しいです。
30
24
 
31
25
 
32
26
 
33
- ③画像が最後に一致するデータのものになってしまいます
34
-
35
-
36
-
37
- ④商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
27
+ ③商品が１つも検索に一致しない場合も付け加えたいのですが、どのような条件分岐をすれば良いのかわかりません。
38
28
 
39
29
  ```PHP
40
30
 
@@ -156,47 +146,33 @@
156
146
 
157
147
  //通信成功時の処理
158
148
 
159
- //alert(data);
149
+ alert(data);
160
150
 
161
- $(".index-product").empty();
162
-
163
- $(".index-product").remove();
151
+ $(".js-MsArea").html('検索に一致する商品がありました');
164
152
 
165
153
  var len = data.length;
166
154
 
167
- if(len === 0){
155
+ for (var i = 0; i < len; i++) {
168
156
 
169
- $(".js-MsArea").html('検索に一致する商品がありませんでした');
157
+ $('.js-remove-product').remove();
170
158
 
171
- }else{
159
+ $('.js-get-product').append($("<a>").attr({
172
160
 
173
- console.log(data);
161
+ "class" : 'product-name',
174
162
 
175
- $(".js-MsArea").html('検索に一致する商品がありました');
163
+ "id": 'name',
176
164
 
177
- for (var i = 0; i < len; i++) {
165
+ "href": '{{ route('products.show', ['product' => $product->id]) }}'
178
166
 
179
- $(".js-get-product").append($('<div class="index-product">'));
167
+ }));
180
168
 
181
- $(".index-product").append($("<img>").attr({
169
+ $('.js-get-product').append($("<img>").attr({
182
170
 
183
- "src": text(data[i].pic),
171
+ "src": '{{ asset('/storage/pic/'.$product->pic) }}',
184
172
 
185
- "class": 'index-img',
173
+ "class": 'index-img',
186
174
 
187
- }));
175
+ }));
188
-
189
- $(".index-product").append($("<a>").text(data[i].name).attr({
190
-
191
- "class" : 'product-name',
192
-
193
- "id": 'name',
194
-
195
- "href": '{{ route('products.show', ['product' => $product->id]) }}',
196
-
197
- }));
198
-
199
- }
200
176
 
201
177
  }
202
178