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

SQL見るだけクエリ#185 非同期通信(jquery)を使って、PHP側へ値を渡して、結果のレスポンスを受ける基本形

記入日:2023-07-12 編集日:2023-07-12

非同期通信(jquery)を使って、PHP側へ値を渡して、結果のレスポンスを受ける基本形について解説してみようと思います。

この記事を読むと(約5分)
非同期通信(jquery)を使って、PHP側へ値を渡して、結果のレスポンスを受ける基本形についてイメージできます。

非同期通信(jquery)を使ってレスポンスを受ける

以下に、JavaScriptとPHPを使用してフォームから2つの数字を非同期で送信し、受け取ったエンドポイントのPHP側で計算して合計と平均を返すコード例を示します。

HTML JavaScript(AJAXを使用する側):

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// フォームの送信イベントを処理する関数
function submitForm() {
  // フォームから値を取得
  var number1 = $('#number1').val();
  var number2 = $('#number2').val();

  // AJAXリクエストを作成
  $.ajax({
    url: 'calculation.php',
    type: 'POST',
    data: {
      number1: number1,
      number2: number2
    },
    dataType: 'json',
    success: function(response) {
      // レスポンスをパースして結果を表示
      $('#result').html('合計: ' + response.total + ', 平均: ' + response.average);
    }
  });
}
</script>


<form>
  <label for="number1">数値1:</label>
  <input type="number" id="number1" required>
  <br>
  <label for="number2">数値2:</label>
  <input type="number" id="number2" required>
  <br>
  <button type="button" onclick="submitForm()">計算する</button>
</form>

<div id="result"></div>

このコードでは、$.ajax関数を使用して非同期リクエストを送信します。データはオブジェクトとして渡され、dataTypeオプションでJSONを指定しています。成功時にはレスポンスをパースして結果を表示します。

注意: 上記のコードを実行するには、jQueryがプロジェクトに組み込まれている必要があります。jQueryを使用するには、以下のスクリプトタグをHTMLに追加してください。

PHP(calculation.php):

// 数値を受け取る
$number1 = $_POST['number1'];
$number2 = $_POST['number2'];

// 計算結果を格納する配列
$result = array();

// 合計を計算
$total = $number1 + $number2;
$result['total'] = $total;

// 平均を計算
$average = ($number1 + $number2) / 2;
$result['average'] = $average;

// 結果をJSON形式で返す
header('Content-Type: application/json');
echo json_encode($result);

PHP側では、受け取った数値を計算し、結果をJSON形式で返します。JavaScriptはレスポンスをパースして結果を表示します。フォームの数値は非同期で送信され、合計と平均が表示されます。

SQLの使いどころ

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

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

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

KK

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