UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#298 Ajaxを使ってPHPからテキストを取得する非同期処理

記入日:2023-11-02 編集日:2023-11-02

Ajaxを使ってPHPからテキストを取得する非同期処理に関して解説してみようと思います。

この記事を読むと(約5分)
Ajaxを使ってPHPからテキストを取得する非同期処理をイメージできます。

Ajaxを使ってPHPからテキストを非同期で取得

以下のコードは、ボタンがクリックされた際にAjaxを使ってサーバーにリクエストを送り、サーバーはそのリクエストを受けて処理を行い、結果をクライアントに返すことです。それぞれの部分はその目的を達成するために役立っています。

JavaScript部分

$(document).ready(function(){
  $(".loadDataBtn").click(function(){
    var btnId = $(this).attr("id");
    var url = "getData.php?content=" + btnId;
    $.ajax({
      url: url,
      type: "GET",
      success: function(data){
        $("#result").html(data);
      }
    });
  });
});
  • $(document).ready(function(){...});:
    これは、ページの読み込みが完了したら実行されるコードです。つまり、全ての要素が揃ってから実行されるものです。
  • $(".loadDataBtn").click(function(){...});:
    $(".loadDataBtn")は、クラスがloadDataBtnである要素を選択します。言い換えると、loadDataBtnクラスを持つボタンがクリックされた時に実行される関数を指定しています。
  • var btnId = $(this).attr("id");:
    この行は、クリックされたボタンのIDを取得しています。$(this)は、クリックされた要素を指し、.attr("id")はその要素のID属性の値を取得します。
  • var url = "getData.php?content=" + btnId;:
    ボタンのIDを使って、リクエスト先のURLを生成しています。例えば、もしクリックされたボタンがcontent1だった場合、URLはgetData.php?content=content1となります。
  • $.ajax({...});:
    これはAjaxリクエストを行うためのコードです。Ajaxリクエストは、非同期でサーバーと通信する手段です。
  • url: url,:
    ここでリクエストの送信先URLを指定しています。
  • type: "GET",:
    このリクエストはGETメソッドを使用します。GETメソッドは、サーバーにデータを要求する際に使用します。
  • success: function(data){...}:
    リクエストが成功した場合、サーバーから返ってきたデータがdataとして渡され、この中の処理が実行されます。
  • $("#result").html(data);:
    dataにはサーバーからの返答が入っています。これを#resultという要素内に挿入します。言い換えると、ページ上の特定の場所にサーバーからのデータを表示します。

PHP部分

if(isset($_GET['content'])){
  $contentId = $_GET['content'];
  switch($contentId){
    case 'content1':
      $data = "コンテンツ1のデータです!";
      break;
    case 'content2':
      $data = "コンテンツ2のデータです!";
      break;
    default:
      $data = "無効なコンテンツです。";
      break;
  }
  echo $data;
} else {
  echo "コンテンツが指定されていません。";
}
  • if(isset($_GET['content'])){...}:
    ここでは、GETリクエストのクエリパラメータcontentがセットされているかを確認しています。もしセットされていれば、以下の処理を行います。
  • $contentId = $_GET['content'];:
    contentクエリパラメータの値を$contentIdに代入しています。
  • switch($contentId){...}:
    $contentIdの値に基づいて処理を分岐します。
  • case 'content1'::
    もし$contentIdがcontent1の場合、次の行からの処理が実行されます。
  • $data = "コンテンツ1のデータです!";:
    コンテンツ1のデータを$dataに代入します。
  • break;:
    switch文から抜けます。
  • case 'content2'::
    もし$contentIdがcontent2の場合、次の行からの処理が実行されます。
  • $data = "コンテンツ2のデータです!";:
    コンテンツ2のデータを$dataに代入します。
  • break;:
    switch文から抜けます。
  • default::
    どのcaseにも当てはまらない場合のデフォルトの処理です。
  • $data = "無効なコンテンツです。";:
    無効なコンテンツの場合のメッセージを$dataに代入します。
  • echo $data;:
    最終的に$dataの値がレスポンスとしてクライアントに返されます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。