[TypeScript] ページにリクエスト送信する関数

2020年11月10日 propg TypeScript, 0

サーブレットで作ったページなどを呼び出す場合、htmlでform定義してsubmitすると思いますが、typescript側だけで実行する方法の一つです。

Htmlからはclickイベントで呼び出せばOKです。

動作するかは実際実行してみないと分かりません。

/**
 * サーバーページにリクエストを送信する
 * 
 * @param url 送信先ページURL 
 * @param params リクエストパラメータ
 * @param method post/get 省略時post
 * @param target 省略時 _blank
 */
sendAction(url: string, params: {name: string, value: string}[], method: string = 'post', target: string = '_blank'): void {
  const f = document.createElement('form');
    f.method = method;
    f.target = target;
    f.action = url;
    f.innerHTML = '';
    params.forEach((p) => {
      f.innerHTML += `<input name="${p.name}" value="${p.value}">`;
    })
    document.body.append(f);
    f.submit();
    document.body.removeChild(f);
}

■ 呼び出し方法

const url = '[呼び出すページURL]';
const params: { name: string, value: string }[] = [];
params.push({ name: 'param1', value: 'value1' });
params.push({ name: 'param2', value: 'value2' });
this.sendAction(url, params);

他にもいろんなやり方がありますのでご参考までに。

 

== ランキングに参加しています。ぜひクリックお願いします ==

[TypeScript] 日付の時分秒部分を切り捨てる 霞ヶ関でパスワード付きzipファイルを廃止へ　について