jQueryでphpからデータを取得する方法を解説

「jQueryの書き方は何となく分かったものの、jQueryとphpの連携ってどうすればできるの?」といった疑問を抱いてませんか?

今回は、jQueryを用いてphpからデータを取得する一連の流れをサンプルコードを用いて解説します。

今回実装する jQueryとphp 一連の流れ

jQueryとphpを用いてデータを取得するために何をするのかを簡単にまとめます。

  1. クライアント側(Ajax)の処理(リクエスト)を受けるためのphpファイルを用意
  2. クライアント側(Ajax)から1で作成したphpファイルにアクセス可能なURLにアクセス
  3. 1で作成したphpファイル内で必要な処理を行う
  4. クライアント側(Ajax)でphpの処理が必要な場合、JavaScriptが理解できる文字列の形式(JSONなど)でphpで文字列を出力する

という流れになります。

実装する一連の流れを知ったら、次にこちらで用意したサンプルコードを模写してみましょう。

 

実際に書いてみよう

実際にjQueryのAjaxを用いてphpからデータを取得する流れをサンプルコードを使って模写してみましょう。

サンプルコードを書く前に、環境構築をしていない人はMacの人はMAMPをインストール、Windowsの人はXAMPPをインストールしましょう。

MAMP/XAMPPをインストールしたら、htdocsディレクトリ以下にtestディレクトリを作成します。

testディレクトリを作成したら、testディレクトリ直下にindex.htmltest.jstest.phpファイルを作成しましょう。

ファイルを作成したらそれぞれのファイルを以下のように書いてみましょう。

index.html

htmlにはフォームとボタンを設置。

送信のボタンをクリックしたときに可否と内容のフォーム内に結果を表示。

 

test.js

dataTypeはjson形式が主流なので、json形式を選択。

 

test.php

それぞれのファイルにコードを書いたら、XAMPP/MAMPを立ち上げ、Apacheを起動させましょう。

Apacheが起動成功し、フォームに情報を入力して入力に成功すると、以下の画像のように表示されるはずです。

フォームの入力不足があれば、if文以下(test.phpの11行目)の処理が実行されます。

他にもリクエストに失敗したときは、ブラウザの内容にエラーの原因が表示されるようになってます。

 

まとめ

今回は「jQueryでPHPからデータを取得する方法」について紹介させていただきました。

jQueryを用いてphpからデータを取得する一連の流れを理解できたら、次はこの記事で書いたサンプルコードを書き換えたりしてみてください。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?