Q&A
pom.xml or build.gradle は？
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での実行)
回答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
総合スコア12011
0
自己解決
申し訳ありません、自己解決しました。
しょうもないファイル名の違いのミスで、jQueryを使ったjavascriptファイルの名前がbookInfo.jsにもかかわらず、読み込もうとしているjsファイル名がbook.jsになっていました。
pythonでやった時は、おそらくbookInfo.jsにしてたいて、javaに作るときに無意識にファイル名を変えたんだと思います。
本当にすいませんでした。
投稿2020/07/16 03:52
総合スコア4
あなたの回答
tips
プレビュー
