jQueryのAjaxでPOST送信してPHPで受け取る方法【初心者向け】現役エンジニアが解説
初心者向けにjQueryのAjaxでPOST送信してPHPで受け取る方法について現役エンジニアが解説しています。AjaxとはHTMLファイルの中の一部だけ表示更新するなどの操作のことです。jQueryでAjaxをPOST送信する書き方や使い方、PHPで受ける取る方法を解説します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回は、jQueryのAjaxでPOST送信してPHPで受け取る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。
今回は、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を読み込むことで、この即時関数が実行されることを意味します。
即時関数についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
2行目の$(“#send”).on(“click”, function(event){では、index.htmlに用意されているid=”send”という要素をクリックしたら、function(event)内の即時関数が実行されることを意味します。
3行目のlet id = $(“#main”).val();では、変数letに、index.htmlに用意されているid=”main”という要素の値を代入しています。
JavaScriptで変数を利用する方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
4行目の、$.ajax({では、Ajaxリクエストを送信するオプションをキーと値のペアで指定し、Ajaxリクエストの処理を開始しています。
$.ajax()メソッドを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
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メソッドを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
今回はドット記法を利用して、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行目の});では、11行目の処理を終了しています。
14行目の});では、2行目の処理を終了しています。
15行目の});では、1行目の処理を終了しています。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
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データを処理することを指定することが良いです。
５行目のecho json_encode($list);では、3行目で用意した$listに入っている配列データをjson_encodeメソッドを利用して、JSONデータに変換して、echoで表示しています。
echoを使う方法についてはこちらの記事を参考にしていただくと、よりご理解を深めていただくことができおすすめです。
6行目のexit;では、PHP処理を終了することを明示的に実装しています。
まとめ
Ajaxによる非同期通信を実装するには、ブラウザからサーバに送信するPOSTデータをjQueryのAjax処理に渡します。
サーバからのレスポンスもjQueryのAjaxで受け取り、$.ajaxまたは$.postメソッド内のfunctionにPHPに渡す処理を記述します。
この処理によってブラウザ上の一部だけ表示更新をさせるようなります。
内容が分かりやすくて良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
執筆してくれたメンター
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：事業会社向け新規事業SNS構築・Shopify海外進出ネットショップ構築、AWSや専用サーバ下でLinuxを使用したセキュアな環境構築、人工知能を利用した画像解析、店舗検索スマホアプリ開発、不動産賃貸・売買事業者様向けWebシステム、政府系金融機関向けVue.jsによるフロントエンド開発、など。ボランティアでプログラミング学校を運営し、中学生がノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞など実績多数。 |
PHPを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
プログラミングを学習していて、このように思ったことはありませんか？
テックアカデミーのPHP/Laravelコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、PHP/Laravelを使ったWebアプリケーション開発を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
