SpringBoot Submit処理をJavaScriptでやりたいです


ユーザーＩＤ	\n\t\t\t\t \n\t\t\t
パスワード	\n\t\t\t\t\n\t\t\t
パスワード再入力	\n\t\t\t\t\n\t\t\t
氏　名	\n\t\t\t\t\n\t\t\t
グループＩＤ	\n\t\t\t \n\t\t\t
権限レベル	\n\t\t\t \n\t\t\t

前提

現在Spring boot + Thymeleafで開発をしています。
初心者のため、詳しくご教授頂けると幸いです。

実現したいこと

画像をSubmitボタンの代わりに使用したいため、Submitの処理をJavascriptで作りました。
Eclipseで作成し、ローカルで動かしたときはうまくSubmit処理ができました。

しかし、Webサーバに移行し、Apache＋Tomcatで動かすと
Not Found
The requested URL was not found on this server.
のエラー画面になり、Submitできません。

Eclipseで動かすのと、Webサーバで動かすのは何が違うのでしょうか？

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

Not Found
The requested URL was not found on this server.

2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet        : GET "/web-euctools/images/spacer.gif", parameters={}
2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-1] o.s.web.servlet.DispatcherServlet        : GET "/web-euctools/images/btn_sakujo.gif", parameters={}
2022-09-02 15:27:39.023 DEBUG 12332 --- [0:1-8009-exec-8] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]]
2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet        : Completed 304 NOT_MODIFIED
2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet        : GET "/web-euctools/images/btn_kosin.gif", parameters={}
2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]]
2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-8] o.s.web.servlet.DispatcherServlet        : Completed 304 NOT_MODIFIED
2022-09-02 15:27:39.039 DEBUG 12332 --- [0:1-8009-exec-1] o.s.w.s.handler.SimpleUrlHandlerMapping  : Mapped to ResourceHttpRequestHandler [Classpath [META-INF/resources/], Classpath [resources/], Classpath [static/], Classpath [public/], ServletContext [/]]
2022-09-02 15:27:39.054 DEBUG 12332 --- [0:1-8009-exec-1] o.s.web.servlet.DispatcherServlet        : Completed 304 NOT_MODIFIED

該当のソースコード

HTML
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4	<meta charset="UTF-8">
5	<link th:href="@{/css/style.css}" rel="stylesheet">
6	<script th:src="@{/js/common.js}"></script> 
7	<title>EUCtools</title>
8<title>ユーザー編集</title>
9</head>
10<body>
11<div id="Layer0" class="titleArea">&nbsp;</div>
12<div id="Layer1" class="dateArea"><span th:text="${today}"></span></div>
13<div id="Layer2" class="userArea" rendered="#{gamenKyotu.syainName!=null}">ログインユーザー：<span th:text="${loginname}"></span></div>
14<div id="Layer3" class="endBtnArea"><a onclick="return closeWindow();"><img src="../../images/btn_end.gif" alt="終了" class="imgBtn"></a></div>
15<div id="Layer4" class="screenNaviArea"><span value="#{gamenKyotu.navigationBar}">ユーザー編集画面</span></div>
16<div id="Layer5" class="screenTitleArea1"></div>
17<div id="Layer6" class="screenTitleText"></div>
18<div id="Layer7"><span>X99-99-99G</span></div>
19<div id="Layer8" class="bodyAreaNew">
20  <div class="container">
21    <div th:if="${validationError}" th:each="error : ${validationError}">
22      <label class="text-danger" th:text="${error}"></label>
23    </div>
24<form th:action="@{/userList/update}" th:object="${userDto}" th:method="post">
25	<table cellpadding="0" cellspacing="0">
26		<col style="width:150px">
27		<col style="width:250px">
28		<tr>
29			<td colspan="2" class="spacer"><img src="../../images/spacer.gif" height="20"></td>
30		</tr>
31		<tr>
32			<th>ユーザーＩＤ</th>
33			<td  colspan=2  class="left">
34				<p th:text="*{userid}"></p><input type="hidden" th:field="*{userid}" th:value="*{userid}"></input>
35			</td>
36		</tr>
37		<tr>
38			<th>パスワード</th>
39			<td colspan=2 class="left">
40				<input type="text" size="10" maxlength="10" th:field="*{pswd}" th:value="*{pswd}" class="inputn"></input>
41			</td>
42		</tr>
43		<tr>
44			<th>パスワード再入力</th>
45			<td colspan=2 class="left">
46				<input type="text" size="10" maxlength="10" th:field="*{repswd}" th:value="*{repswd}" class="inputn"></input>
47			</td>
48		</tr>
49		<tr>
50			<th>氏　名</th>
51			<td colspan=2 class="left">
52				<input type="text" size="40" maxlength="30" th:field="*{user_name}" class="inputn"></input>
53			</td>
54		</tr>
55		<tr>
56			<th>グループＩＤ</th>
57			<td colspan=2 class="left">
58			    <select th:field="*{groupid}">
59			        <option value=""></option>
60			        <option th:each="grouplist : ${grouplist}" th:value="${grouplist.groupid}" th:text="${grouplist.group_name}"></option>
61			    </select>
62			</td>
63		</tr>
64		<tr>
65			<th>権限レベル</th>
66			<td colspan=2 class="left">
67			    <select th:field="*{permit}">
68			        <option value=""></option>
69			        <option value="A">管理者</option>
70			        <option value="B">利用ユーザ</option>
71			    </select>
72			</td>
73		</tr>
74	</table>
75	</form>
76  </div>
77</div>
78<div id="Layer11" class="btnArea">
79<table>
80<tr>
81<td width="10" class="nonp">&nbsp;</td>
82<td width="110" class="nonp"><a onclick="formSubmit('/userList/update');"><img src="../../images/btn_kosin.gif" alt="更新" class="imgBtn" /></a></td><td width="10" class="nonp">&nbsp;</td>
83<td width="110" class="nonp"><a onclick="formSubmit('/userList/delete');"><img src="../../images/btn_sakujo.gif" alt="削除" class="imgBtn" /></a></td><td width="10" class="nonp">&nbsp;</td>
84<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
85<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
86<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
87<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
88<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
89<td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td>
90<td width="110" class="nonp"><a th:href="@{/userList}"><img src="../../images/btn_modoru.gif" alt="戻る" class="imgBtn"/></a></td><td width="10" class="nonp">&nbsp;</td>
91<td width="10" class="nonp">&nbsp;</td>
92</tr>
93</table>
94</div>
95</body>
96</html>

Java（@Controller）
1@Controller
2public class UserController {
3	@Autowired
4	HttpSession session;
5	@Autowired
6	UserService userService;
7	@Autowired
8	GroupService groupService;
9
10    @PostMapping(value = "/userList/update")
11    public String update(@Validated @ModelAttribute UserDto userDto, BindingResult result, Model model){
12    	System.out.println(userDto.getUser_name());
13    	if (result.hasErrors()) {
14    		List<String> errorList = new ArrayList<String>();
15	  		for (ObjectError error : result.getAllErrors()) {
16	  		errorList.add(error.getDefaultMessage());
17	  		}
18	  		model.addAttribute("validationError", errorList);
19	  		return "userEdit";
20    	}
21    	// ユーザー情報の更新
22    	userService.update(userDto);
23    	return "redirect:/userList";
24    }
25    
26	/**
27	* ユーザー削除
28	* @param userRequest リクエストデータ
29	* @param model Model
30	* @return ユーザー情報詳細画面
31	*/
32	@GetMapping("/userList/delete")
33	public String delete(@PathVariable String userid)  {
34	// ユーザー情報の削除
35	userService.delete(userid);
36	return "redirect:/userList";
37	}
38}

Javascript
1function formSubmit(path){
2    if(!path){
3        alert('パスを指定してください');
4        return;
5    }
6    let form = document.getElementsByTagName('form')[0];
7    if(!form){
8        alert('フォームが取得できませんでした');
9        return;
10    }
11    form.action=path;
12    form.method="post";
13    form.submit();
14}

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

WebサーバはWindowsです。

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

m.ts10806

2022/09/02 06:41 編集

＞画像をSubmitボタンの代わりに使用したいため、Submitの処理をJavascriptで作りました。 JavaScriptのコードを提示してください。ただinput type=imageにすればsubmitボタンになりますが、それでは代用できませんか？ https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image

行動規範の内容に同意します

回答1件

ベストアンサー

ビルドの設定等々が分からないので何とも言えない部分はありますが

formSubmit('/userList/update');

コンテキストパスがあるのでしたら、これではパスが合いません。
th:actionと同じように@{}でURLを生成しましょう。

ただ、本当に「画像をSubmitボタンの代わりに使用したいため」だけでJavaScriptを使用する必要はないと思います。
先にコメントしたように、input type=imageにすればsubmitボタンになりますし、
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/image

JavaScriptを使いたいというのでしたら、imageのクリックイベントでform.submitすれば、わざわざリクエストURLを引数で渡さずともformのactionの設定値で送信できるので、先に回答したような対応も不要になります。

投稿2022/09/02 07:10

編集2022/09/02 07:12

m.ts10806

総合スコア80890