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

投稿日：2021年6月17日更新日：2021年6月27日

＜目次＞

(１) JavaScriptでformをPOSTリクエストでsubmitするプログラムの例
　 (１-１) 概要
　 (１-２) 構文
　 (１-３) サンプルプログラム
　 (１-４) 補足：「HTMLのformをsubmit」VS「JavaScriptのsubmit()」（両者の違い）

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

(１-１) 概要

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

（図１１１）通常のリクエスト／レスポンス

（図１１２）JavaScriptを経由したリクエスト／レスポンス

※（図１１２）は「JS ⇒ Servlet ⇒ JSP」のような経路となっていますが、JavaScriptを使うと小回りが利くので、実際は「JS ⇒ JSP」や「JS ⇒ Servlet ⇒ JS（response使いDOM操作）⇒ JSP」など色々な使い方が可能です。

＞目次にもどる

(１-２) 構文

以下は、リクエストを送るための最低限の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要素の名前を指定します。

＞目次にもどる

(１-３) サンプルプログラム

●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>

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