jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説

初心者向けにjQueryのAjaxでPOST送信してPHPで受け取る方法について現役エンジニアが解説しています。AjaxとはHTMLファイルの中の一部だけ表示更新するなどの操作のことです。jQueryでAjaxをPOST送信する書き方や使い方、PHPで受ける取る方法を解説します。

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

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

 

PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

jQueryのAjaxでPOST送信してPHPで受け取る方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

Ajaxとは

Ajaxとは、HTTPプロトコル通信でHTMLやPHPファイルからリクエスト送信がHTTPサーバに送信してレスポンスをブラウザ側で受信する動作を非同期通信で受け取ることができる技術です。

Ajaxを使うとHTMLファイルの中の一部だけ表示更新するなどの操作を行うことができます。

例えば、ブラウザ上に表示した一覧表の内容を更新してデータベース登録した内容をまた一覧に反映させる時、HTMLファイルの一覧部分だけ表示更新する、ということができるようになります。

[PR] PHPプログラミングで挫折しない学習方法を動画で公開中

AjaxでPOST送信する

Ajaxを使ってPOST送信するにはjQuery側でPOST送信するデータの定義を記述して、PHP側で受け取り側の記述をします。

(POST送信とはブラウザの入力フォーム等の内容をサーバ(PHP)に送る送信方法の一つです。)

 

表示結果

 

index.htmlのコード

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>
</head>
<body>
  <p>IDを入力 : <input type="text" id="main" /><button id="send">送信</button></p>
  <div id="return"></div>
  <script src="./main.js"></script>
</body>
</html>

 

解説

1行目の<!DOCTYPE html>では、HTML5で作成することを宣言しています。

2行目の<html>では、html文書の実装を開始することを意味しています。

3行目の<head>では、head要素の開始を意味しています。

4行目の<meta charset=”UTF-8″>ではUTF-8という文字コードで実装することを意味しています。

5行目の<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>では、jQueryのコードを読み込んでいます。今回googleが用意したCDNを利用しています。

jQueryファウンデーションが用意しているCDNの方が、確実に最新バージョンをいち早く利用することができるメリットがありますが、CDNによってはサーバーが一時的に停止していることがあるので、GoogleのCDNを利用するようにしています。

 

6行目の<title>jQueryのAjaxでPOST送信してPHPで受け取る方法を現役エンジニアが解説</title>では、検索結果やブラウザのタブに表示されるタイトルを指定しています。

 

7行目の</head>ではhead要素が終了することを意味しています。

8行目の<body>では、body要素が開始することを意味しています。

9行目の<p>IDを入力 : <input type=”text” id=”main” /><button id=”send”>送信</button></p>では、IDを入力するための入力フォームを用意しています。id=”main”とid=”send”は、それぞれJavaScriptが実装されたmain.jsで利用されるため、要素名を覚えておいていただくとご理解しやすいです。

 

10行目の<div id=”return”></div>も、main.jsで利用される要素です。最終的にこの位置に、main.jsで用意されたhtmlが追加表示されます。

 

11行目の<script src=”./main.js”></script>では、JavaScriptのコードを用意しているファイルを読み込んでいます。

かならず5行目にあるように、jQueryファイルを先に読み込んで、そのあとJavaScriptファイルを読み込んで頂くとスムーズです。

 

12行目の</body>では、body要素が終了することを意味しています。

13行目の</html>では、html文章が終了することを意味しています。

 

jQuery(送信側)の記述方法

jQuery ではPHPにPOSTするデータの定義と送信結果を受け取ったあとのアクションを記述します。

記述の仕方は$.ajaxで記述する場合と$.postメソッドを使用して記述する場合の2通りで紹介します。

 

$.ajaxで記述する方向

$.ajaxを利用して実装するコードを見ていきましょう。

サンプルコード(main.js)

  $(function(){
    $("#send").on("click", function(event){
      let id = $("#main").val();
      $.ajax({
        type: "POST",
        url: "techacademy.php",
        data: { "id" : id },
        dataType : "json"
      }).done(function(data){
        $("#return").append('<p>'+data.id+' : '+data.school+' : '+data.skill+'</p>');
      }).fail(function(XMLHttpRequest, status, e){
        alert(e);
      });
    });
  });

 

解説

1行目の$(function(){では、即時関数を宣言しています。

ここでは、main.jsを読み込むことでこの即自関数が実行されることを意味します。

即自関数についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

JavaScriptで即時関数を使う方法【初心者向け】 | TechAcademyマガジン

2行目の$(“#send”).on(“click”, function(event){では、index.htmlに用意されているid=”send”という要素をクリックしたら、function(event)内の即自関数が実行されることを意味します。

 

3行目のlet id = $(“#main”).val();では、変数letに、index.htmlに用意されているid=”main”という要素の値を代入しています。

JavaScriptで変数を利用する方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

JavaScriptで書く「let,var,const」の違い・使い分け | TechAcademyマガジン

 
4行目の、$.ajax({では、Ajaxリクエストを送信するオプションをキーと値のペアで指定し、Ajaxリクエストの処理を開始しています。

$.ajax()メソッドを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

開発現場で役に立つ!JavaScriptでAjaxを使う方法 | TechAcademyマガジン

 
5行目の、type: “POST”,では、処理で利用するタイプをPOST送信タイプで利用することを指定しています。

POST送信とは、手紙をポストに入れるように、main.jsから、phpに対して送信するイメージで捉えてみてください。

 

6行目の、url: “techacademy.php”,では、送信先を指定しています。今回であれば、techacademy.phpになります。

ファイルではなく、https://からはじめるURLを指定することも可能です。

 

7行目の、data: { “id” : id },では、3行目で宣言したidをdata内でidという名称利用できるようにしています。

 

8行目の、dataType : “json”では、データタイプをJSONデータというタイプにする指定をしています。

JSONを扱う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

JavaScriptでJSONファイルを読み込む方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

 
9行目の、}).done(function(data){では、2行目から8行目までの処理が完了したあと行う処理を実装しています。

doneメソッドを利用すると、done処理の前にある処理が終わってから、doneメソッドの処理を行う順番で処理を実行することが可能です。今回は、dataを引数に持つ即自関数が実行されます。

 

10行目の、$(“#return”).append(‘<p>’+data.id+’ : ‘+data.school+’ : ‘+data.skill+'</p>’);では、index.htmlにあるid=”return”という要素に対して、appendメソッドを利用して、<p>’+data.id+’ : ‘+data.school+’ : ‘+data.skill+'</p>で指定している内容を追記する処理をしています。

appendメソッドを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

jQueryでappendを使って要素を追加する方法 | TechAcademyマガジン

 
今回はドット記法を利用してdataオブジェクトのプロパティであるdata.idやdata.schoolやdata.skillを指定しています。

ドット記法を利用する方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

JavaScriptでオブジェクトにプロパティを追加する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

 
<p>はパラグラフタグといって、段落を意味するhtmlタグです。段落なので利用することで改行を自動挿入してくれます。

 

11行目の、}).fail(function(XMLHttpRequest, status, e){では、もしここまでの処理が失敗した場合、エラーを表示する順次処理です。ここまでの処理に失敗したら引数のeにエラー内容が代入されます。

 

12行目のalert(e);では、処理がエラーになった場合にエラー内容が表示されます。

たとえば、6行目のファイルが存在しない場合、Not Foundのようなエラーが発生します。

13行目の});では、12行目の処理を終了しています。

14行目の});では、2行目の処理を終了しています。

15行目の});では、1行目の処理を終了しています。

 

PHP(受信側)の記述方法

main.jsからtechacademy.phpにPOST送信されたデータがどのように処理されるか解説します。

 

サンプルコード(techacademy.php)

<?php
  $id = $_POST['id'];
  $list = array("id" => $id, "school" => "テックアカデミー", "skill" => "PHPプログラミングスキル" );
  header("Content-type: application/json; charset=UTF-8");
  echo json_encode($list);
  exit;

 

解説

1行目の<?phpでは、PHPプログラムを開始することを意味しています。

2行目の$id = $_POST[‘id’];では、main.jsから送信されたidというデータをphp側で利用するために変数$idに代入しています。

PHPでPOST処理でデータを受け取る方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
PHPで変数を利用する方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

 
3行目の$list = array(“id” => $id, “school” => “テックアカデミー”, “skill” => “PHPプログラミングスキル” );では、配列の$listに対して、(“id” => $id, “school” => “テックアカデミー”, “skill” => “PHPプログラミングスキル” という構造の配列データを代入しています。

ここで利用している$idは2行目で用意した変数です。

 

4行目のheader(“Content-type: application/json; charset=UTF-8”);を指定しないと、text/html型で処理されます。

その場合もなんとなく処理は通るのですが、厳密にJSONデータを処理することを指定することが良いです。

 

5行目のecho json_encode($list);では、3行目で用意した$listに入っている配列データをjson_encodeメソッドを利用して、JSONデータに変換して、echoで表示しています。

echoを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。

PHPでechoを使って文字列を出力する方法を現役エンジニアが解説【初心者向け】 | TechAcademyマガジン

 
6行目のexit;では、PHP処理を終了することを明示的に実装しています。

 

まとめ

Ajaxによる非同期通信を実装するには、ブラウザからサーバに送信するPOSTデータをjQueryのAjax処理に渡します。

サーバからのレスポンスもjQueryのAjaxで受け取り、$.ajaxまたは$.postメソッド内のfunctionにPHPに渡す処理を記述します。

この処理によってブラウザ上の一部だけ表示更新させるようなります。

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

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

大石ゆかり

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

 
 

監修してくれたメンター

中本賢吾(なかもとけんご)
アジマッチ有限会社 代表取締役社長

開発実績:事業会社向け新規事業SNS構築・Shopify海外進出ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用した画像解析、店舗検索スマホアプリ開発、不動産賃貸・売買事業者様向けWEBシステム、政府系金融機関向けVue.jsによるフロントエンド開発、など。

ボランティアでプログラミング学校を運営し、中学生がノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞など実績多数。

 
TechAcademyでは、初心者でも、PHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。

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