JavaScriptでPOST送信する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでPOST送信する方法について現役エンジニアが解説しています。POST送信とは、データをサーバーへ送る機能のことです。JavaScriptのAJAXを使ってPHPファイルと連帯し、POST送信を実現させましょう。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptでPOST送信する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでPOST送信する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

POSTとは

POSTとは、通信規格であるhttp通信内でWebページの中でサーバ(Webサーバ)とクライアント(ブラウザ等)とのやりとりに利用する一つの機能です。

ブラウザの表示方法として、GETという機能を使ってブラウザが「このURLのページを送って!」とリクエストを出し、Webサーバが指定されたURLのページをクライアントに送信し、ブラウザ上で目的のページが表示されます。

GETは主にサーバへWebページなどのデータをリクエストする際に利用するものであり、POSTは逆にデータを送信する際に使います。

POSTは、Webの掲示板などで文章を投稿する際などに利用されています。

 

JavaScriptでPOST送信する方法

POST送信を行うにはHTMLのフォームを利用するなど様々な方法があるものの、JavaScriptでPOST送信したい場合もあります。

例えば、Webアプリケーションの中にはボタンを押した際に画面の遷移は行わないけど、画面の一部を書き換えたい場合などはJavaScriptを使ってPOST送信をすることが可能です。

今回は簡単な数値計算アプリケーションを使って、JavaScriptによるPOST送信の方法を見ていきましょう。

今回作成する数値計算アプリケーションでは、入力欄が3つあり、1つめと2つめに数値を入れましょう。

計算ボタンを押すと3つ目の入力欄に2つの値を足した計算結果が表示されます。

画面は以下のような形となります。

JavaScriptのPOST送信で使う、HTMLのサンプル。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際に書いてみよう

今回作成した数値計算アプリケーションのソースコードはHTMLファイルとJavaScriptファイル、サーバ側のPHPファイルです。

※サーバ側PHPファイル

<?php

$arg1 = $_POST['arg1'];
$arg2 = $_POST['arg2'];

$answer = $arg1 + $arg2;

echo $answer;

※HTMLファイル

<!DOCTYPE html> <html lang="ja"> <head> 
<meta charset="utf-8"> <title>計算機アプリ</title> <script src="script.js"></script> 
</head> 
<body> <input id="arg1" type="number"> + <input id="arg2" type="number"> = <input id="answer" type="number"> <br/>
 <button id="calc_button">計算</button> 
</body> </html>

※JavaScriptファイル

window.onload = function() {
  // 計算ボタンを押した際の動作を設定
  document.getElementById('calc_button').onclick = function() {
    post();
  };

  xhr = new XMLHttpRequest();

  // サーバからのデータ受信を行った際の動作
  xhr.onload = function (e) {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        var answer = document.getElementById('answer');
        answer.value = xhr.responseText;
      }
    }
  };
};

// 計算ボタンを押した際の動作
function post() {
  xhr.open('POST', 'calc.php', true);
  xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
  // フォームに入力した値をリクエストとして設定
  var request = "arg1=" + arg1.value + "&arg2=" + arg2.value;
  xhr.send(request);
}

では、ソースコードの解説をみていきましょう。

まず、サーバ側のPHPファイルでは、POSTで受け取った二つの値を画面に表示させました。

二つの変数、&arg1と&arg2がJavaScriptから送られてくる2つの値でそれを足し合わせた結果を$answerに入れ、画面に表示しています。

 

次にHTMLファイルについてみていきましょう。

HTMLファイルでは、画面上に3つのinput要素と計算ボタンを配置しています。

arg1, arg2とIDが振ってあるinput要素が足し合わせる数値の入力欄、IDがanswerのinput要素が答えを表示するinput要素です。

 

そしてJavaScriptファイルについてふれていきます。

コード上では、window.onloadにHTMLファイルがすべて読み込まれた際の動作を設定している状態です。

内部では、計算ボタンを押した際の動作やPOST通信の結果がサーバから帰ってきた際の動作について規定しています。

計算ボタンを押した際の動作は、指定したサーバへinput要素に入力された値をPOSTで送信するというものです。

 

今回JavaScriptでPOST通信を行うにあたってAjaxを使用する方法を採用しています。

Ajaxは非同期にサーバとの通信を行うことで、ユーザの操作を中断させることなくサーバでの処理結果を画面に反映させることのできる手法です。

また、Ajaxを利用するためにXMLHttpRequestを使用しています。

ここではXMLHttpRequestインスタンスの新規作成を行い、xhr.onloadにサーバからデータ受信を行った際の動作を設定しました。

内容としては、データ受信を行った際に答え表示用のinput要素にサーバから受信した計算結果を設定しています。

この一連の処理によって、数値入力⇒POSTリクエスト送信⇒計算結果表示という処理の流れが実現しています。

参考にして、POST送信を使用する方法を有効に使っていきましょう。

執筆してくれたメンター

黒木一志(くろきかつし)

TechAcademyジュニアのゲームアプリコースを担当しています黒木です。

現在は会社員としてシステムエンジニアをしております。

会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。

プライベートではバンド演奏や本を読んだり映画を見たりしております。最近はスケボーにハマってます。

みなさんにプログラミングの楽しさをお伝え出来たらと思っております。何卒宜しくお願い致します。

 

大石ゆかり

JavaScriptでPOST送信する方法が分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。