スキルアップを始める!

【GAS】JavaScriptからGASのdoPost関数にデータを送信するには?

JavaScript(ジャバスクリプト)
JavaScript(ジャバスクリプト)
この記事は約3分で読めます。

※記事中に広告情報を含みます。

スキルを手に入れた時、人は強くなれる。
Youtubeでスキルアップを始める 電子書籍でスキルアップを始める
\ワードプレスのスキルアップはこちら!/ WordPress入門読本

doPost関数にデータを送信する

JavaScriptからGASのdoPost関数にデータを送信するには、XMLHttpRequestオブジェクトを使用してPOSTリクエストを送信します。

以下は、JavaScriptでPOSTリクエストを送信するサンプルコードです。

const url = 'https://script.google.com/macros/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/exec';

const data = {
  'key1': 'value1',
  'key2': 'value2'
};

const xhr = new XMLHttpRequest();
xhr.open('POST', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var response = JSON.parse(xhr.responseText);
    // POSTリクエストのレスポンスを処理する
  }
};
xhr.send(JSON.stringify(data));

この例では、url変数にGASのWebアプリケーションのURLを指定し、data変数にPOSTリクエストで送信するデータをオブジェクト形式で指定しています。

XMLHttpRequestオブジェクトを使用してPOSTリクエストを送信し、setRequestHeaderメソッドでContent-Typeヘッダーを指定しています。

onreadystatechangeイベント

[rml_read_more]

onreadystatechangeイベントでPOSTリクエストのレスポンスを受信し、JSON.parseメソッドでJSON形式のレスポンスをJavaScriptのオブジェクトに変換しています。

これで、GAS側でデータが受け取れるので、htmlのデータをスプレッドシートに書き込むといった処理も可能となります。※オリジン間リソース共有 (CORS)の問題があるので出来ない場合もあります。

まとめ

なお、url変数には、GASのWebアプリケーションのURLを指定する必要があります。また、Content-Typeヘッダーには、送信するデータの形式に合わせて適切な値を指定する必要があります。

また、オリジン間リソース共有 (CORS)にも注意が必要です。

以上の点に注意して、POSTリクエストを送信してください。

URLをコピーしました!