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

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

ただいまの
回答率

88.93%

Spring bootでjQueryを動かす方法

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 203

Nov_

score 4

openBD...書誌情報・書影を、だれでも自由に使える、高速なAPI

今現在、Spring bootとtymeleafを使って書籍管理をするwebアプリを作成している最中です。
今やろうとしていることは、webページから書籍のISBNコードを入力した後、jQueryによってopenBDに問合せて書籍情報を表示するというものです。
つまり、「webページにISBNコードを入力→openBDに問合せ→書籍情報を表示」といった感じです。

ですが、jQueryがうまく動作しないので書籍情報が表示できなくて困っています。
おそらく表示するHTMLで、jQUeryを読み込めていないせいで認識していないからだと思っています。
JQueryを読み込むscriptタグなどが間違っていると思うので、うまくインポートする方法を教えていただきたいです。


以下、プログラムです.
operateCollate.html(書籍情報を取得して表示するHTML)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
<meta name="viewport"
          content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" />

<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/js/book.js" th:src="@{/js/book.js}"></script>

<meta charset="UTF-8">
<title>書籍管理アプリ</title>
</head>

<body>
    <div class="main">
        <form method="get">
            <div>
                ISBN:<input id="isbn" type="text" name="isbn" th:value="${isbn}"
                    autofocus>
            </div>

            <div>
                書籍名:<input id="title" type="text" name="title" value="">
            </div>

            <div>
                出版社:<input id="publisher" type="text" name="publisher" value="">
            </div>

            <div>
                著者:<input id="author" type="text" name="author" value="">
            </div>

            <div>
                <p id="thumbnail_image"></p>
                <input hidden id="thumbnail" type="text" name="thumbnail" value="">
            </div>
            <div class="">
                <p>上記の書籍について、下記を選択してください.</p>
                <button type="submit">登録</button>
                <button type="submit" formaction="ServletDelete">削除</button>
            </div>
        </form>

        <div>
            <a href="/index">戻る</a>
        </div>
    </div>
</body>
</html>


 
bookInfo.js(ISBNコードからopenBDを使って問い合わせて、各要素に情報を送る)

$(function () {
    const isbn = $("#isbn").val();
    const url = "https://api.openbd.jp/v1/get?isbn=" + isbn;

    $.getJSON(url, function (data) {
        var title = 'なし';
        var publisher = 'なし';
        var author = 'なし';
        var thumbnail = 'なし';

        if (data[0] != null) {
            if (data[0].summary.cover == "") {
                $("#thumbnail_image").html('<img src=\"\" />');
            } else {
                $("#thumbnail_image").html('<img src=\"' + data[0].summary.cover + '\" style=\"border:solid 1px #000000\" />');
                thumbnail = data[0].summary.cover;
            }

            title = data[0].summary.title;
            publisher = data[0].summary.publisher;
            author = data[0].summary.author;
        }

        $("#title").val(title);
        $("#publisher").val(publisher);
        $("#author").val(author);
        $("#thumbnail").val(thumbnail);
    });
});

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.3.1.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>BookManagement-webapp</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>BookManagement-webapp</name>
    <description>Demo project for Spring Boot</description>

    <properties>
        <java.version>1.8</java.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>3.3.7-1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.1.1</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>


  
成功例(pythonでの実行)
成功例

失敗例(今回のSpring bootでの実行)
失敗例

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2020/07/16 07:31

    pom.xml or build.gradle は?

    キャンセル

  • Nov_

    2020/07/16 12:34

    pom.xml です!
    すいません、質問に載せます!

    キャンセル

回答 3

+2

プロジェクトのpom.xmlに webjar を想定されているバージョンで導入しているでしょうか。

jQuery3.4.1とBootstap4.3.1を利用する場合の例:

        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.3.1</version>
        </dependency>


バージョンは適宜変更してください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/16 12:38

    pom.xmlも修正で追加させていただきましたが、バージョンは同じです。

    キャンセル

+1

根本的解決にはなりませんが、どうしても難しいのならCDNを利用するのもひとつの手です。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

check解決した方法

0

申し訳ありません、自己解決しました。
しょうもないファイル名の違いのミスで、jQueryを使ったjavascriptファイルの名前がbookInfo.jsにもかかわらず、読み込もうとしているjsファイル名がbook.jsになっていました。

pythonでやった時は、おそらくbookInfo.jsにしてたいて、javaに作るときに無意識にファイル名を変えたんだと思います。

本当にすいませんでした。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る