Q&A
やりたいこと
SpringBootで作成したwebアプリケーションを配備し、問題なく動作させたい
また、urlが変わっても対応できるようにurlの一部を取得して組み込みたい(必要ならば)
現状
配備後、javascriptファイル自体は読み込むが$.getJSONでアクセスがうまく行かない
http://localhost8080/MastaList/Age?YMD＝(生年月日)
でアクセスするとJSON形式で年齢が返ってくるようにしているが(例：{ "age" : 20 })、ソースのままだと
http://localhost8080/Age?YMD＝(生年月日)
にアクセスしてしまいエラーになる。
やってみたこと
配備後、Create.htmlにアクセスし、
→http://http://localhost:8080/MastaList/MastaList?create=(略)
(MastaList一つ目はwarファイル名？、二つ目はControllerのRequestパラメータ)
Age.jsでpathnameを取得、$.getJSONの引数に組み込んでみたが
http://localhost8080/MastaList/MastaList/Age?YMD＝(生年月日)
となってしまいエラー。
ならば、とpathnameをsplit("/")で分割し、片方だけを組み込もうとしてみたが何故かこれも上記と同じ結果となってしまいエラー。
アクセスするurlを相対参照で"../Age","../../Age","./Age","/Age"等試してみたがエラー。
(エラーはすべて404です)
MastaController.java(一部)
java
1@RequestMapping("/MastaList") 2@Controller 3public class MastaController { 4 5 @Autowired 6 private SelectAll selectAll; 7 8 @GetMapping 9 public String SelectList(Model model){ 10 ArrayList<Entity> list = selectAll.selectall(); 11 model.addAttribute("AllList",list); 12 return "EntityList"; 13 } 14 15 @RequestMapping(params="create") 16 public String Create(@ModelAttribute Entity entity) { 17 return "Create"; 18 }
Create.html
HTML
1<!DOCTYPE html> 2<html xmlns:th="http://www.thymeleaf.org"> 3<head> 4<meta charset="UTF-8"> 5<title>Insert title here</title> 6<script type="text/javascript" th:src="@{/jquery-3.5.1.min.js}"></script> 7</head> 8<body> 9 10<h2>新規登録</h2> 11 12<form action="MastaList" th:object="${entity}" method="post"> 13 14 <label>生年月日</label> 15 <span th:if="${#fields.hasErrors('year')}" th:errors="*{year}" style="color: red"></span> 16 <br> 17 <input type="text" id="year" name="year" th:attr="onkeyup='AgeGet();'" th:field="*{year}">年 18 <span th:if="${#fields.hasErrors('month')}" th:errors="*{month}" style="color: red"></span> 19 <br> 20 <input type="text" id="month" name="month" th:attr="onkeyup='AgeGet();'" th:field="*{month}">月 21 <span th:if="${#fields.hasErrors('day')}" th:errors="*{day}" style="color: red"></span> 22 <br> 23 <input type="text" id="day" name="day" th:attr="onkeyup='AgeGet();'" th:field="*{day}">日 24 <p id="ageval"></p> 25 <input type="text" id="age" name="age" readonly>歳 26 <br> 27 28 <label>氏名</label> 29 <span th:if="${#fields.hasErrors('name')}" th:errors="*{name}" style="color: red"></span><br /> 30 <input type="text" id="name" name="name" th:field="*{name}"> 31 <br> 32 33 <label>かな</label> 34 <span th:if="${#fields.hasErrors('kana')}" th:errors="*{kana}" style="color: red"></span><br /> 35 <input type="text" id="kana" name="kana" th:field="*{kana}"> 36 <br> 37 38 <label>郵便番号</label> 39 <span th:if="${#fields.hasErrors('code')}" th:errors="*{code}" style="color: red"></span><br /> 40 〒<input type="text" id="code" name="code" th:field="*{code}"> 41 <br> 42 43 <label>住所</label> 44 <span th:if="${#fields.hasErrors('add1')}" th:errors="*{add1}" style="color: red"></span><br /> 45 <input type="text" id="add1" name="add1" th:field="*{add1}"> 46 <br> 47 48 <label>番地以降</label> 49 <span th:if="${#fields.hasErrors('add2')}" th:errors="*{add2}" style="color: red"></span><br /> 50 <input type="text" id="add2" name="add2" th:field="*{add2}"> 51 <br> 52 53 <label>メールアドレス</label> 54 <span th:if="${#fields.hasErrors('mail')}" th:errors="*{mail}" style="color: red"></span><br /> 55 <input type="text" id="mail" name="mail" th:field="*{mail}"> 56 <br> 57 58 <label>電話番号</label> 59 <span th:if="${#fields.hasErrors('tell')}" th:errors="*{tell}" style="color: red"></span><br /> 60 <input type="text" id="tell" name="tell" th:field="*{tell}" th:attr="onkeyup='tellval();'"> 61 <p id="error"></p> 62 <br> 63 <br> 64 65 <input type="submit" value="登録" name="insert"> 66</form> 67<a href="/MastaList">リストに戻る</a> 68 69<script type="text/javascript" th:src="@{/Age.js}"></script> 70<script type="text/javascript" th:src="@{/CodeSearch.js}"></script> 71<script type="text/javascript" th:src="@{/KeyDown.js}"></script> 72<script type="text/javascript" th:src="@{/TellValid.js}"></script> 73 74</body> 75</html>
Age.js
javascript
1function AgeGet() { 2 var year = $('#year').val(); 3 if ($('#month').val().length == 1) { 4 var month = "0" + $('#month').val(); 5 } else { 6 var month = $('#month').val(); 7 } 8 if ($('#day').val().length == 1) { 9 var day = "0" + $('#day').val(); 10 } else { 11 var day = $('#day').val(); 12 } 13 var YMD = year + month + day; 14 15 var pathname = location.pathname; 16 var path = pathname.split("/"); 17 console.log(path[2]); //やろうとしたことの名残 18 19 if (YMD.length == 8 && month >= 1 && month <= 12 20 && day >= 1 && day <= 31) { 21 $.getJSON('../Age', 22 { 23 YMD : YMD 24 } 25 ) 26 27 .done(function (data) { 28 if (data != null) { 29 30 var jsonstr = JSON.stringify(data); 31 var json = JSON.parse(jsonstr); 32 var age = json.age; 33 34 35 if (parseInt(age) < 16 || parseInt(age) > 80) { 36 $("#age").val(age); 37 $('#ageval').html("年齢が正しくありません"); 38 } else { 39 $("#age").val(age); 40 $("#ageval").html(""); 41 } 42 } 43 }) 44 .fail(function () { 45 console.log("失敗"); 46 }) 47 } 48} 49
お力添え、ご助言お願いいたします。
環境：
windows10 64bit
Spring Tool Suite 4 4.7.2
Tomcat 8.5
回答1件
0
ベストアンサー
Thymeleafテンプレート内のHTMLやJavaScriptにてコんテキストパスが取得しにくい場合は、以下の記事を参考にされると良いでしょう。
投稿2020/11/12 16:02
総合スコア12011
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/13 00:16 編集
2020/11/13 00:30
2020/11/13 01:00