半角英数とひらがな1文字の場合、「入力された内容では検索できません。検索内容を変更してください。」という文を追加したいのですが、「The SSL certificate used to load resources from https://app.rakuten.co.jp will be distrusted in M66. Once distrusted, users will be prevented from loading these resources. See https://g.co/chrome/symantecpkicerts for more information.」という!△のエラー文が出てきて、しまうのと、非同期通信の際に表示される、「データ通信ができませんでした。接続を確認してください。」が表示されてしまいます。
!△と同時にこの情報が一緒には出てきています。
jquery.js:4 GET https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522?keyword=a&applicationId=1019399324990976605&booksGenreId=001&page=1&hits=20 400 (Bad Request)
このエラーの意味を教えていただきたいのと、どうすれば上記の内容が実装できるのか知りたいです。
$(function() { $('.search__btn').on('click', function() { $('.lists').empty(); var searchword = $('.search__text__input').val(); if(searchword === '') { $('.lists').html('<p class="message">文字が入力されてません。文字を入力してください。</p>'); return; //問題点 } else if(searchword === 1) { $('.lists').html('<p class="message">入力された内容では検索できません。検索内容を変更してください。</p>'); } $.ajax({ url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522', type: 'GET', datatype: 'json', data: { keyword: searchword, applicationId: '1019399324990976605', booksGenreId: '001', page: 1, hits: 20 } }).done(function(data) { if(data.hits === 0) { $('.lists').html('<p class="message">検索結果がありませんでした。<br>別のキーワードで検索してください</p>'); } data.Items.forEach(function(item) { var template = '<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="'+ item.Item.title +'">' + '<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>'; $('.lists').append(template); }) //表示されてしまうもの }).fail(function() { $('.lists').html('<p class="message">データ通信ができませんでした<br>接続を確認してください。</p>'); }); }); }); </script>
<!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> </body> </html>
.clearfix:after { display: block; clear: both; content: ''; } .wrapper { padding: 20px; } .container { } .header { width: 100%; background-color: #43cee0; } .header__title { line-height: 60px; text-align: center; font-size: 20px; color: #fff; } .search { overflow: hidden; margin-bottom: 50px; background: #fff; box-shadow: 0 1px 5px #ccc; } .search__text { width: 100%; } .search__text__input { -webkit-box-sizing: border-box; box-sizing: border-box; width: 100%; margin-bottom: 20px; padding: 0 10px; line-height: 3em; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #eee; font-size: 20px; } .search__btn { display: block; margin: 0 auto 20px; padding: 0 20px; line-height: 40px; border: none; font-size: 18px; color: #fff; background-color: #43cee0; } .search__btn:hover { background-color: #1eabbd; } .lists { overflow: hidden; margin-left: 20px; } .lists__item { -webkit-box-sizing: border-box; box-sizing: border-box; display: inline-block; width: 25%; padding: 0 20px 20px 0; vertical-align: top; text-align: center; } .lists__item__inner { width: 100%; max-width: 200px; margin: 0 auto; } .lists__item__link { display: block; text-decoration: none; } .lists__item__img { margin-bottom: 20px; width: 100%; max-width: 150px; -webkit-box-shadow: 0 1px 5px #ccc; box-shadow: 0 1px 5px #ccc; } .lists__item__detail { margin-bottom: 10px; padding-left: 5em; text-indent: -5em; line-height: 1.5em; text-align: left; font-size: 12px; } .message { margin-bottom: 50px; text-align: center; } @media screen and (max-width: 767px) { .lists__item { width: 33.33%; } } @media screen and (max-width: 479px) { .lists__item { width: 50%; } }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。