Rainbow Engine

IT技術を分かりやすく簡潔にまとめることによる学習の効率化、また日常の気付きを記録に残すことを目指します。

Java JavaScript JSP/Servlet

JavaScriptでformをPOSTリクエストでsubmitするプログラムの例

投稿日:2021年6月17日 更新日:

 

<目次>

(1) JavaScriptでformをPOSTリクエストでsubmitするプログラムの例
 (1-1) 概要
 (1-2) 構文
 (1-3) サンプルプログラム
 (1-4) 補足:「HTMLのformをsubmit」VS「JavaScriptのsubmit()」(両者の違い)

(1) JavaScriptでformをPOSTリクエストでsubmitするプログラムの例

(1-1) 概要

通常HTMLからformをsubmit処理して、Servlet等にリクエスト(POST/GET)を送って処理を行うパターンが最もベーシックかと思いますが、今回は別の手段としてJavaScriptを使って<form>を動的に生成し、そこからPOSTやGETのリクエストを送る方法をご紹介します。

 

(図111)通常のリクエスト/レスポンス
 
(図112)JavaScriptを経由したリクエスト/レスポンス
 
※(図112)は「JS ⇒ Servlet ⇒ JSP」のような経路となっていますが、JavaScriptを使うと小回りが利くので、実際は「JS ⇒ JSP」や「JS ⇒ Servlet ⇒ JS(response使いDOM操作)⇒ JSP」など色々な使い方が可能です。
 

(1-2) 構文

以下は、リクエストを送るための最低限のJavaScriptです。

var form = document.createElement("form");
form.method = "POST";
form.action = "IT0xxx_JsCreateElementForm_AFTER.jsp";
document.body.append(form);
form.submit();
まず、最初のcreateElementメソッドはHTMLの要素を生成するためのメソッドで、引数に要素名(例:form、divなど)を指定して作成します。今回はformを指定しているので、<form>要素を生成している事になります。
 
以降は作成したform要素を使って、HTMLでformを使う時と同じように、鍵となるプロパティ(属性)をセットしていきます。
 
(表)form要素のプロパティの例

プロパティ 説明
action form要素のaction属性と対応しており、formの送り先のURLを指定します。
(例)
form.action = “IT0xxx_JsCreateElementForm_AFTER.jsp”;
method form要素のmethod属性と対応しており、formを送る際のリクエストの方式(GET、POSTなど)を指定します。
(例)
form.method = “POST”;
name form要素のname属性と対応しており、form要素の名前を指定します。

(1-3) サンプルプログラム

●JavaScript

function CreateElementTest(){

    //# JsCreateElementの挙動確認
    var form = document.createElement("form");
    form.method = "POST";
    form.action = "IT0xxx_JsCreateElementForm_AFTER.jsp";
    document.body.append(form);
    form.submit();

}

●JSP(遷移前)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="js/IT0xxx_JsCreateElement.js" type="text/javascript" charset="UTF-8"></script>
<title>Js Create Element Test</title>
</head>
<body>
<h2>■createElementの挙動確認</h2>
<input type="button" value="createElementテスト" onclick="CreateElementTest()">
</body>
</html>

●JSP(遷移後)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Js Create Element Test</title>
</head>
<body>
<h2>【遷移後画面(AFTER)】createElementの挙動確認</h2>
<a href="IT0xxx_JsCreateElementForm.jsp" >→ Back to IT0xxx_JsCreateElementForm.jsp</a>
</body>
</html>

 

(操作動画)
上記のサンプルプログラムを実際に動かした動画です。

目次にもどる

(1-4) 補足:「HTMLのformをsubmit」VS「JavaScriptのsubmit()」(両者の違い)

●「HTMLのformをsubmit」の利点(メリット)

・formの入力値(ユーザの画面入力値)をリクエストに乗せて送れる(&簡単に取り出せる)
 
・安定している(JavaScriptはOFFにされたら動作しなくなるため、原則はサーバサイドの処理でsubmitするのが定石

 

●「JavaScriptのsubmit()」の利点(メリット)

・工夫すれば、ボタン以外のトリガーでリクエストを送れる
(例)jQueryの「$(function(){…});」を使ってロード時にリクエスト
 
(例)各種イベント(マウスクリックなど)をトリガーにリクエスト
 
(例)リンクのクリックをトリガーにリクエスト
 

Adsense審査用広告コード


Adsense審査用広告コード


-Java, JavaScript, JSP/Servlet

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

JSP/Servletで必須入力チェックを実装する方法+サンプルプログラムや操作動画も紹介

<目次> (1) JSP/Servletで必須入力チェックを実装する方法  (1-1) 必須入力チェックの概要   (1-1-1) 全体の処理フロー   (1-1-2) 必須入力チェック部分の処理フロ …

JSPとは?役割や基本文法およびHelloWorldのサンプルプログラムの紹介

(0)目次&概説 (1) JSPの基本  (1-1) JSPとは?  (1-2) JSPのHelloWorld (2) JSPの基本文法  (2-1) ディレクティブ  (2-2) アクションタグ   …

JavaScriptのletとは?変数宣言で使われるletの意味やサンプルプログラム

<目次> (1) JavaScriptのletとは?変数宣言で使われるletの意味やサンプルプログラム  (1-1) letとは?  (1-2) letのサンプルプログラム  (1-3) 参考:スコー …

オープンアドレス法のアルゴリズムについて図を使ってご紹介

<目次> (1) オープンアドレス法のアルゴリズムについて図を使ってご紹介  (1-1) オープンアドレス法とは?  (1-2) オープンアドレス法のアルゴリズム  (1-3) オープンアドレス法の利 …

Javaの動的Webプロジェクト作成での事前設定と雛形Webプロジェクト作成

「動的Webプロジェクト」とはHTMLのような静的ページのみならず、ServletやJSPを用いてWebアプリケーション開発をする際に作成します。本記事ではEclipseにて「動的Webプロジェクト」 …

  • English (United States)
  • 日本語
Top