teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

2019/04/04 11:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,126 +1,2 @@
1
1
  楽天ブックス総合検索APIを使った検索機能を作成しています。
2
- 正しいワードでの検索時の表示方法はじっそうできたのですが。エラー時の表示がまだできていません。
2
+ 正しいワードでの検索時の表示方法はじっそうできたのですが。エラー時の表示がまだできていません。
3
- 通信が切れてる時、検索ワードが半角英数字1文字などのエラー時はfailメソッド内にresponseJSONに入ってるerror_descriptionを使わなければならないのですが、どのように利用すればいいのか調べてもわかりません。ご教授をお願いします。
4
-
5
- ```HTMLjQuery
6
- <!doctype html>
7
- <html>
8
- <head>
9
- <meta charset="UTF-8">
10
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
11
- <meta name="format-detection" content="telephone=no">
12
- <title>jQuery</title>
13
- <link rel="stylesheet" href="../../common/css/reset.css">
14
- <link rel="stylesheet" href="../../common/css/base.css">
15
- <link rel="stylesheet" href="./css/style.css">
16
- </head>
17
- <body>
18
- <div class="wrap">
19
- <div class="container">
20
- <div class="header">
21
- <p class="header__title">Search Books!</p>
22
- </div>
23
- <div class="search">
24
- <div class="search__text">
25
- <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する">
26
- </div>
27
- <button id="js-search-button" class="search__btn">検索する</button>
28
- </div>
29
- <ul class="lists"></ul>
30
- </div>
31
- </div>
32
- <script src="../../common/js/jquery.js"></script>
33
- <script>
34
- $(function() {
35
- var pageNum = 0;
36
- var prevWord = '';
37
- $('#js-search-button').on('click',function() {
38
- var searchWord = $('#js-search-word').val();
39
- var wordCount = searchWord.replace(/\s+/g,'').length;
40
- if(prevWord == searchWord) {
41
- pageNum += 1;
42
- } else {
43
- $('.lists').empty();
44
- pageNum = 1;
45
- }
46
- prevWord = searchWord;
47
- $.ajax({
48
- url: '取得済み',
49
- type: 'GET',
50
- datatype: 'json',
51
- data: {
52
- applicationId: '取得済み',
53
- booksGenreId: '取得済み',
54
- keyword: searchWord,
55
- hits: 20,
56
- page: pageNum
57
- },
58
- }).done(function(data) {
59
- console.log(data);
60
- var searchResult = '';
61
- if(data.count > 0){
62
- $('.message').remove();
63
- $.each(data.Items,function(i,val){
64
- searchResult += '<li class="lists__item">' + '<div class="lists__item__inner">' + '<a href="'+ val.Item.itemUrl +'" class="lists__item__link" target="_blank">' +
65
- '<img src="'+ val.Item.largeImageUrl +'" class="lists__item__img" alt="">' +
66
- '<p class="lists__item__detail">作品名:'+ val.Item.title +'</p>' +
67
- '<p class="lists__item__detail">作者:'+ val.Item.author +'</p>' +
68
- '<p class="lists__item__detail">出版社:'+ val.Item.publisherName+'</p>' +
69
- '</a>' + '</div>' + '</li>';
70
- });
71
- $('.lists').prepend(searchResult);
72
- } else {
73
- $('.lists').prepend('<p class="message">検索結果が見つかりませんでした。他のキーワード(半角英数字1文字以上)で検索してください。</p>');
74
- }
75
- }).fail(function(err) {
76
- var log = $.parseJSON(err.status);
77
- $('.lists').html(log);
78
- });
79
- });
80
- });
81
- // 楽天ブックスの総合検索APIを使って製作してください。
82
- // answerの挙動を良く見てね!
83
- //
84
- // 下記URLにAPIの仕様が載ってるいので、ブラウザで開いて参考にしてください。
85
- // https://webservice.rakuten.co.jp/api/bookstotalsearch/
86
- //
87
- //
88
- // [使うメソッド]
89
- // $.each(配列, function functionName() {}) 配列に対しての繰り返し処理
90
- // $.ajax({}) 外部ファイルやURLに対してデータをリクエストすることができます。
91
- // 以下は今回使う$.ajaxの基本的な形です。
92
- //
93
- // $.ajax({
94
- // url: '取得済み',
95
- // type: 'GET',
96
- // datatype: 'json',
97
- // data: {
98
- // // 「区分:サービス固有パラメーター」を確認して、必要な情報をdata内に入れましょう。
99
- // applicationId: '取得済み', // (今回はこのIDを使用してください)
100
- // booksGenreId: '取得済み'
101
- // },
102
- // }).done(function(data) {
103
- // // この中にデータ取得後の動きを記述していきます。
104
- // console.log(data);
105
- // });
106
- //
107
- //
108
- // $.ajaxによってデータが取得できたら、必要なデータ(作品名とか作者名とか)を取得します。
109
- // 取得できたらHTMLに<ul class='lists'></ul>を用意しているので、その中に下のテンプレに沿ってデータを入れ込みましょう。
110
- // <li class='lists__item'>
111
- // <div class='lists__item__inner'>
112
- // <a href='' class='lists__item__link' target='_blank'>
113
- // <img src='' class='lists__item__img' alt=''>
114
- // <p class='lists__item__detail'>作品名:</p>
115
- // <p class='lists__item__detail'>作者 :</p>
116
- // <p class='lists__item__detail'>出版社:</p>
117
- // </a>
118
- // </div>
119
- // </li>
120
- //
121
- //
122
- //
123
- </script>
124
- </body>
125
- </html>
126
- ```

2

質問内容の編集

2019/04/04 11:47

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  楽天ブックス総合検索APIを使った検索機能を作成しています。
2
2
  正しいワードでの検索時の表示方法はじっそうできたのですが。エラー時の表示がまだできていません。
3
- エラー時はfailメソッド内にresponseJSONに入ってるerror_descriptionを使わなければならないのですが、どのように利用すればいいのか調べてもわかりません。ご教授をお願いします。
3
+ 通信が切れてる時、検索ワードが半角英数字1文字などのエラー時はfailメソッド内にresponseJSONに入ってるerror_descriptionを使わなければならないのですが、どのように利用すればいいのか調べてもわかりません。ご教授をお願いします。
4
4
 
5
5
  ```HTMLjQuery
6
6
  <!doctype html>
@@ -73,8 +73,8 @@
73
73
  $('.lists').prepend('<p class="message">検索結果が見つかりませんでした。他のキーワード(半角英数字1文字以上)で検索してください。</p>');
74
74
  }
75
75
  }).fail(function(err) {
76
- console.log(err);
76
+ var log = $.parseJSON(err.status);
77
-
77
+ $('.lists').html(log);
78
78
  });
79
79
  });
80
80
  });

1

各種コード変更

2019/04/04 08:10

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -91,13 +91,13 @@
91
91
  // 以下は今回使う$.ajaxの基本的な形です。
92
92
  //
93
93
  // $.ajax({
94
- // url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
94
+ // url: '取得済み',
95
95
  // type: 'GET',
96
96
  // datatype: 'json',
97
97
  // data: {
98
98
  // // 「区分:サービス固有パラメーター」を確認して、必要な情報をdata内に入れましょう。
99
- // applicationId: '1019399324990976605', // (今回はこのIDを使用してください)
99
+ // applicationId: '取得済み', // (今回はこのIDを使用してください)
100
- // booksGenreId: '001'
100
+ // booksGenreId: '取得済み'
101
101
  // },
102
102
  // }).done(function(data) {
103
103
  // // この中にデータ取得後の動きを記述していきます。