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

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

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

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

jQuery

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

Q&A

解決済

1回答

1976閲覧

jQueryで楽天APIで検索ボタン作成

algein

総合スコア12

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2019/01/29 03:26

検索し、そのまま再び検索ボタンを押すと次の20件の商品を上に積み上げていく形で表示させたいのですがどのようにしたら出来ますか?
検索ボタンを押すと20件表示されます

**HTML** <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <title>jQuery</title> <link rel="stylesheet" href="../../common/css/reset.css"> <link rel="stylesheet" href="../../common/css/base.css"> <link rel="stylesheet" href="./css/style.css"> </head> <body> <div class="wrap"> <div class="container"> <div class="header"> <p class="header__title">Search Books!</p> </div> <div class="search"> <div class="search__text"> <input type="text" id="js-search-word" class="search__text__input" placeholder="検索する"> </div> <button id="js-search-button" class="search__btn">検索する</button> </div> <ul class="lists"></ul> </div> </div> <script src="../../common/js/jquery.js"></script> <script> ここにjQueryが入る </script> </body> </html>
**jQuery** $(function(){ $('#js-search-button').on('click',function(){ var keyword = $('#js-search-word').val(); $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { // 「区分:サービス固有パラメーター」を確認して、必要な情報をdata内に入れましょう。 applicationId: '1019399324990976605', // (今回はこのIDを使用してください) booksGenreId: '001', keyword: keyword, hits: '20', }}).done(function(data){ if (data.count > 0){ $("ul").empty(); $.each(data.Items,function(i,item){ var list = $("<li class='lists__item'>" + "<div class='lists__item__inner'>" + "<a href='" + item.Item.itemUrl +           "'class='lists__item__link' target='_blank'>" + "<img src='" + item.Item.mediumImageUrl +           "' class='lists__item__img' alt>" + "<p class='lists__item__detail'>作品名: " +           item.Item.title + '</p>' + "<p class='lists__item__detail'>作者 : " +           item.Item.author + '</p>' + "<p class='lists__item__detail'>出版社: " +            item.Item.publisherName + '</p>' + '</a>' + '</div>' + '</li>'); $('ul').prepend(list); }) } else { $('.lists').before('<div class="coment"></div>') coment = $('.coment'); coment.html('<p class="message">検索結果が見つかりませんでした。</p>'); } }); });

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

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

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

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

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

m.ts10806

2019/01/29 04:58

タイトルは質問内容に寄せてください。また最初の質問が未解決のまま進んで良い内容には思えません。 質問は編集できますし、回答のためには必要な指摘も多いです。適宜ご対応ください。
guest

回答1

0

ベストアンサー

「取得ページ」のパラメータはpageとなっていますね。
楽天ウェブサービス: 楽天ブックス総合検索API(version:2017-04-04) | API一覧
なので、検索するたびに1つずつ増やせばいいのではないでしょうか?

投稿2019/01/29 03:32

Lhankor_Mhy

総合スコア35865

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

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

algein

2019/01/29 05:58

前回と同じワードで検索したらpageを追加して前回と違うワードで検索したらpage削除をしたいのですがどう書けばいいですか?
Lhankor_Mhy

2019/01/29 06:01

keyword の中身を別の変数などに退避させておく、というのがわかりやすそうに思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問