jqueryで楽天API

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
jqueryで楽天APIを出力したいですが出来ません教えてください
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード
<!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>
      $(function() {
        $('#js-search-button').on('click', function(){
    var keyword = $('#search_area').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
          },
          }), function(data){
      if (data.count > 0){
        // console.log(data);
        $.each(data.Items, function(i, item){
          var temp = $(`<li><a href="${item.Item.itemUrl}"><img src="${item.Item.mediumImageUrls[0].imageUrl}"></a></li>`);
          $('ul').append(temp);
          }) // each
          }}; // function(data)
            }).done(function(data) {
            keyword: keyword,   
            sort,
            hits,
            field,
            orFlag,
            booksGenreId,
            page
            
           // この中にデータ取得後の動きを記述していきます。
        });
        
      //
      // <li class='lists__item'>
      //  <div class='lists__item__inner'>
      //    <a href='' class='lists__item__link' target='_blank'>
      //      <img src='' class='lists__item__img' alt=''>
      //      <p class='lists__item__detail'>作品名：</p>
      //      <p class='lists__item__detail'>作者　：</p>
      //      <p class='lists__item__detail'>出版社：</p>
      //    </a>
      //  </div>
      // </li>
    });      
    </script>
  </body>
</html>


### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

mather

2019/01/28 01:45

ソースコードはマークダウンのコードブロックを使ってください。

m.ts10806

2019/01/28 01:56

質問テンプレート文言が多く残っています。ノイズとなりえますので削るか、できれば項目を埋めてください。「できません」では起きている現象がわかりません。エラーが出ているかとか自身が調べたこと試したことは必須です。「楽天APIを出力」というのは実際の要件には沿っていないように思います。「○○の情報を××のように取得して△△のように使いたい(表示させたい)」という風に具体的に書いてください。でないと誰も何も応えられませんしエスパーされても困るのは質問者さん自身です(そのエスパーする人が出てくればいいですが) またapplicationIdは実際のものでしょうか？あまり質問サイトで例示するには相応しくない情報かと思いますので、できれば質問を削除依頼し、新しい質問をたててください。