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

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

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

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Tomcat

TomcatはApache Software Foundation (ASF)で開発されたオープンソースのWebコンテナです。

Spring Boot

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

解決済

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

kikirara
kikirara

総合スコア2

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Tomcat

TomcatはApache Software Foundation (ASF)で開発されたオープンソースのWebコンテナです。

Spring Boot

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

1回答

0リアクション

1クリップ

292閲覧

投稿2022/09/02 06:34

編集2022/09/02 06:51

前提

現在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

<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <link th:href="@{/css/style.css}" rel="stylesheet"> <script th:src="@{/js/common.js}"></script> <title>EUCtools</title> <title>ユーザー編集</title> </head> <body> <div id="Layer0" class="titleArea">&nbsp;</div> <div id="Layer1" class="dateArea"><span th:text="${today}"></span></div> <div id="Layer2" class="userArea" rendered="#{gamenKyotu.syainName!=null}">ログインユーザー:<span th:text="${loginname}"></span></div> <div id="Layer3" class="endBtnArea"><a onclick="return closeWindow();"><img src="../../images/btn_end.gif" alt="終了" class="imgBtn"></a></div> <div id="Layer4" class="screenNaviArea"><span value="#{gamenKyotu.navigationBar}">ユーザー編集画面</span></div> <div id="Layer5" class="screenTitleArea1"></div> <div id="Layer6" class="screenTitleText"></div> <div id="Layer7"><span>X99-99-99G</span></div> <div id="Layer8" class="bodyAreaNew"> <div class="container"> <div th:if="${validationError}" th:each="error : ${validationError}"> <label class="text-danger" th:text="${error}"></label> </div> <form th:action="@{/userList/update}" th:object="${userDto}" th:method="post"> <table cellpadding="0" cellspacing="0"> <col style="width:150px"> <col style="width:250px"> <tr> <td colspan="2" class="spacer"><img src="../../images/spacer.gif" height="20"></td> </tr> <tr> <th>ユーザーID</th> <td colspan=2 class="left"> <p th:text="*{userid}"></p><input type="hidden" th:field="*{userid}" th:value="*{userid}"></input> </td> </tr> <tr> <th>パスワード</th> <td colspan=2 class="left"> <input type="text" size="10" maxlength="10" th:field="*{pswd}" th:value="*{pswd}" class="inputn"></input> </td> </tr> <tr> <th>パスワード再入力</th> <td colspan=2 class="left"> <input type="text" size="10" maxlength="10" th:field="*{repswd}" th:value="*{repswd}" class="inputn"></input> </td> </tr> <tr> <th>氏 名</th> <td colspan=2 class="left"> <input type="text" size="40" maxlength="30" th:field="*{user_name}" class="inputn"></input> </td> </tr> <tr> <th>グループID</th> <td colspan=2 class="left"> <select th:field="*{groupid}"> <option value=""></option> <option th:each="grouplist : ${grouplist}" th:value="${grouplist.groupid}" th:text="${grouplist.group_name}"></option> </select> </td> </tr> <tr> <th>権限レベル</th> <td colspan=2 class="left"> <select th:field="*{permit}"> <option value=""></option> <option value="A">管理者</option> <option value="B">利用ユーザ</option> </select> </td> </tr> </table> </form> </div> </div> <div id="Layer11" class="btnArea"> <table> <tr> <td width="10" class="nonp">&nbsp;</td> <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> <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> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <td width="110" class="nonp">&nbsp;</td><td width="10" class="nonp">&nbsp;</td> <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> <td width="10" class="nonp">&nbsp;</td> </tr> </table> </div> </body> </html>

Java(@Controller)

@Controller public class UserController { @Autowired HttpSession session; @Autowired UserService userService; @Autowired GroupService groupService; @PostMapping(value = "/userList/update") public String update(@Validated @ModelAttribute UserDto userDto, BindingResult result, Model model){ System.out.println(userDto.getUser_name()); if (result.hasErrors()) { List<String> errorList = new ArrayList<String>(); for (ObjectError error : result.getAllErrors()) { errorList.add(error.getDefaultMessage()); } model.addAttribute("validationError", errorList); return "userEdit"; } // ユーザー情報の更新 userService.update(userDto); return "redirect:/userList"; } /** * ユーザー削除 * @param userRequest リクエストデータ * @param model Model * @return ユーザー情報詳細画面 */ @GetMapping("/userList/delete") public String delete(@PathVariable String userid) { // ユーザー情報の削除 userService.delete(userid); return "redirect:/userList"; } }

Javascript

function formSubmit(path){ if(!path){ alert('パスを指定してください'); return; } let form = document.getElementsByTagName('form')[0]; if(!form){ alert('フォームが取得できませんでした'); return; } form.action=path; form.method="post"; form.submit(); }

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

WebサーバはWindowsです。

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

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

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

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Apache

Apacheは、Apache HTTP Serverの略で、最も人気の高いWebサーバソフトウェアの一つです。安定性が高いオープンソースソフトウェアとして商用サイトから自宅サーバまで、多くのプラットフォーム向けに開発・配布されています。サーバーソフトウェアの不具合(NCSA httpd)を修正するパッチ(a patch)を集積、一つ独立したソフトウェアとして開発されました。

Java

Javaは、1995年にサン・マイクロシステムズが開発したプログラミング言語です。表記法はC言語に似ていますが、既存のプログラミング言語の短所を踏まえていちから設計されており、最初からオブジェクト指向性を備えてデザインされています。セキュリティ面が強力であることや、ネットワーク環境での利用に向いていることが特徴です。Javaで作られたソフトウェアは基本的にいかなるプラットフォームでも作動します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Tomcat

TomcatはApache Software Foundation (ASF)で開発されたオープンソースのWebコンテナです。

Spring Boot

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