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)に送る送信方法の一つです。)
 

jQuery(送信側)の記述方法

jQuery ではPHPにPOSTするデータの定義と送信結果を受け取ったあとのアクションを記述します。記述の仕方は$.ajaxで記述する場合と$.postメソッドを使用して記述する場合の2通りで紹介します。
 

$.ajaxで記述する場合

$.ajaxで記述する場合は、以下のようにtypeにPOSTを指定してdataにPOSTするデータを記述します。

 $.ajax({
   //POST通信
   type: "POST",
   //ここでデータの送信先URLを指定します。
   url: "post.php",
   data: {key1: 'adress', key2: 'name'}
   //処理が成功したら
   success : function(data, dataType) {
     //HTMLファイル内の該当箇所にレスポンスデータを追加する場合
     $('#sample').html("送信成功しました");
     },
     //処理がエラーであれば
     error : function() {
     alert('通信エラー');
   }
 });
 //submitによる画面リロードを防いでいます。
 return false;
 

 

$.postで記述する場合

$.postで記述する場合は、$.ajaxで記述するよりも、より簡潔に記述することができます。

以下の例では、postdataにpostするデータを定義して、$.postメソッドで送信先PHPを指定してPOSTするデータをpostdataで定義した内容を渡してあげます。

 var postdata ={"address":"東京都","name":"山田"}
   $.post({
   //ここでデータの送信先URLを指定します。
   "postdata.php?",
   postdata,
   //処理
   function(data) {
 }
 });

 

PHP(受信側)の記述方法

PHP側では$_POST[]でjQueryのpostdataに設定されているデータを受け取ります。受け取ったデータは処理後、echoすることで呼び出し側のjQueryに返すことができます。

$adress = $_POST['address'];// 東京都
$name = $_POST['name'];// 山田 
$result = 'あなたの住所は、' . $adress . ' 名前は、'.$name . 'さん';
echo $result;

 

まとめ

Ajaxによる非同期通信を実装するには、ブラウザからサーバに送信するPOSTデータをjQueryのAjax処理に渡します。サーバからのレスポンスもjQueryのAjaxで受け取り、$.ajaxまたは$.postメソッド内のfunctionにPHPに渡す処理を記述します。

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

筆者プロフィール

メンター大塚さん

普段はPMとしてメーカにて業務システム開発に従事する傍ら、フリーランスでWebサーバ、フロント開発をPHP、MySQL、Javascript、等を使用してのプログラミングを実施している。

最近ではPythonを使用した機械学習プログラムの開発も実施中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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