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

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

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

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

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

Q&A

解決済

3回答

6053閲覧

Spring bootでjQueryを動かす方法

Nov_

総合スコア4

jQuery

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

Thymeleaf

Thymeleaf(タイムリーフ)とは、Java用のテンプレートエンジンで、特定のフレームワークに依存せず使用することが可能です。

Spring Boot

Spring Bootは、Javaのフレームワークの一つ。Springプロジェクトが提供する様々なフレームワークを統合した、アプリケーションを高速で開発するために設計されたフレームワークです。

0グッド

0クリップ

投稿2020/07/15 14:10

編集2020/07/16 03:37

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

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

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


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

html

1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3 4<head> 5<meta name="viewport" 6 content="width=device-width, initial-scale=1, shrink-to-fit=no" /> 7 8<link rel="stylesheet" th:href="@{/webjars/bootstrap/3.3.7-1/css/bootstrap.min.css}" /> 9 10<script th:src="@{/webjars/jquery/3.1.1/jquery.min.js}"></script> 11<script th:src="@{/webjars/bootstrap/3.3.7-1/js/bootstrap.min.js}"></script> 12<script type="text/javascript" src="/js/book.js" th:src="@{/js/book.js}"></script> 13 14<meta charset="UTF-8"> 15<title>書籍管理アプリ</title> 16</head> 17 18<body> 19 <div class="main"> 20 <form method="get"> 21 <div> 22 ISBN:<input id="isbn" type="text" name="isbn" th:value="${isbn}" 23 autofocus> 24 </div> 25 26 <div> 27 書籍名:<input id="title" type="text" name="title" value=""> 28 </div> 29 30 <div> 31 出版社:<input id="publisher" type="text" name="publisher" value=""> 32 </div> 33 34 <div> 35 著者:<input id="author" type="text" name="author" value=""> 36 </div> 37 38 <div> 39 <p id="thumbnail_image"></p> 40 <input hidden id="thumbnail" type="text" name="thumbnail" value=""> 41 </div> 42 <div class=""> 43 <p>上記の書籍について、下記を選択してください.</p> 44 <button type="submit">登録</button> 45 <button type="submit" formaction="ServletDelete">削除</button> 46 </div> 47 </form> 48 49 <div> 50 <a href="/index">戻る</a> 51 </div> 52 </div> 53</body> 54</html>

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

javascript

1$(function () { 2 const isbn = $("#isbn").val(); 3 const url = "https://api.openbd.jp/v1/get?isbn=" + isbn; 4 5 $.getJSON(url, function (data) { 6 var title = 'なし'; 7 var publisher = 'なし'; 8 var author = 'なし'; 9 var thumbnail = 'なし'; 10 11 if (data[0] != null) { 12 if (data[0].summary.cover == "") { 13 $("#thumbnail_image").html('<img src=\"\" />'); 14 } else { 15 $("#thumbnail_image").html('<img src=\"' + data[0].summary.cover + '\" style=\"border:solid 1px #000000\" />'); 16 thumbnail = data[0].summary.cover; 17 } 18 19 title = data[0].summary.title; 20 publisher = data[0].summary.publisher; 21 author = data[0].summary.author; 22 } 23 24 $("#title").val(title); 25 $("#publisher").val(publisher); 26 $("#author").val(author); 27 $("#thumbnail").val(thumbnail); 28 }); 29});

pom.xml

xml

1<?xml version="1.0" encoding="UTF-8"?> 2<project xmlns="http://maven.apache.org/POM/4.0.0" 3 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 4 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> 5 <modelVersion>4.0.0</modelVersion> 6 <parent> 7 <groupId>org.springframework.boot</groupId> 8 <artifactId>spring-boot-starter-parent</artifactId> 9 <version>2.3.1.RELEASE</version> 10 <relativePath /> <!-- lookup parent from repository --> 11 </parent> 12 <groupId>com.example</groupId> 13 <artifactId>BookManagement-webapp</artifactId> 14 <version>0.0.1-SNAPSHOT</version> 15 <name>BookManagement-webapp</name> 16 <description>Demo project for Spring Boot</description> 17 18 <properties> 19 <java.version>1.8</java.version> 20 </properties> 21 22 <dependencies> 23 <dependency> 24 <groupId>org.springframework.boot</groupId> 25 <artifactId>spring-boot-starter-data-jpa</artifactId> 26 </dependency> 27 <dependency> 28 <groupId>org.springframework.boot</groupId> 29 <artifactId>spring-boot-starter-data-jdbc</artifactId> 30 </dependency> 31 <dependency> 32 <groupId>org.springframework.boot</groupId> 33 <artifactId>spring-boot-starter-security</artifactId> 34 </dependency> 35 <dependency> 36 <groupId>org.springframework.boot</groupId> 37 <artifactId>spring-boot-starter-thymeleaf</artifactId> 38 </dependency> 39 <dependency> 40 <groupId>org.springframework.boot</groupId> 41 <artifactId>spring-boot-starter-web</artifactId> 42 </dependency> 43 44 <dependency> 45 <groupId>mysql</groupId> 46 <artifactId>mysql-connector-java</artifactId> 47 <scope>runtime</scope> 48 </dependency> 49 <dependency> 50 <groupId>org.springframework.boot</groupId> 51 <artifactId>spring-boot-starter-test</artifactId> 52 <scope>test</scope> 53 <exclusions> 54 <exclusion> 55 <groupId>org.junit.vintage</groupId> 56 <artifactId>junit-vintage-engine</artifactId> 57 </exclusion> 58 </exclusions> 59 </dependency> 60 <dependency> 61 <groupId>org.springframework.security</groupId> 62 <artifactId>spring-security-test</artifactId> 63 <scope>test</scope> 64 </dependency> 65 <dependency> 66 <groupId>org.webjars</groupId> 67 <artifactId>bootstrap</artifactId> 68 <version>3.3.7-1</version> 69 </dependency> 70 <dependency> 71 <groupId>org.webjars</groupId> 72 <artifactId>jquery</artifactId> 73 <version>3.1.1</version> 74 </dependency> 75 </dependencies> 76 77 <build> 78 <plugins> 79 <plugin> 80 <groupId>org.springframework.boot</groupId> 81 <artifactId>spring-boot-maven-plugin</artifactId> 82 </plugin> 83 </plugins> 84 </build> 85 86</project> 87

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

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

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/07/15 22:31

pom.xml or build.gradle は?
Nov_

2020/07/16 03:34

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

回答3

0

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

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

xml

1 <dependency> 2 <groupId>org.webjars</groupId> 3 <artifactId>jquery</artifactId> 4 <version>3.4.1</version> 5 </dependency> 6 <dependency> 7 <groupId>org.webjars</groupId> 8 <artifactId>bootstrap</artifactId> 9 <version>4.3.1</version> 10 </dependency>

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

投稿2020/07/15 15:32

A-pZ

総合スコア12011

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

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

Nov_

2020/07/16 03:38

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

0

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

投稿2020/07/15 22:24

m.ts10806

総合スコア80765

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

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

0

自己解決

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

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

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

投稿2020/07/16 03:52

Nov_

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問