SQL見るだけクエリ#145 PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法（補足）

PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法を解説してみようと思います。

この記事を読むと（約5分）
PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法をイメージできます。

昨日のコードに関して、JavaScriptのコード部分を解説を補足して、コードを記述します。

  $(document).ready(function() {
    // ドキュメントの読み込みが完了した時に実行される関数

    // カートに追加ボタンがクリックされた時の処理
    $(document).on('click', '.add-to-cart', function() {
      // カートに追加ボタンがクリックされた時の処理を定義

      var productId = $(this).data('product-id');
      // クリックされたボタンのdata属性からproduct-idの値を取得し、productIdに代入

      $.ajax({
        type: 'POST',
        url: 'index.php',
        data: {product_id: productId},
        // AJAXリクエストを作成し、index.phpにPOSTリクエストを送信
        // データとしてproduct_idを送信

        dataType: 'json',
        // レスポンスのデータタイプをJSON形式に指定

        success: function(response) {
          // リクエストが成功した場合に実行される関数
          // レスポンスデータはresponseとして受け取る

          $('.cart-items').html(response.cartItems);
          // カートの内容を更新するため、cart-itemsクラスを持つ要素のHTMLをresponseのcartItemsで置き換える

          $('.total-price').html(response.totalPrice);
          // カートの合計金額を更新するため、total-priceクラスを持つ要素のHTMLをresponseのtotalPriceで置き換える
        }
      });
    });

    // カートから削除ボタンがクリックされた時の処理
    $(document).on('click', '.remove-from-cart', function() {
      // カートから削除ボタンがクリックされた時の処理を定義

      var removeId = $(this).data('remove-id');
      // クリックされたボタンのdata属性からremove-idの値を取得し、removeIdに代入

      $.ajax({
        type: 'POST',
        url: 'index.php',
        data: {remove_id: removeId},
        // AJAXリクエストを作成し、index.phpにPOSTリクエストを送信
        // データとしてremove_idを送信

        dataType: 'json',
        // レスポンスのデータタイプをJSON形式に指定

        success: function(response) {
          // リクエストが成功した場合に実行される関数
          // レスポンスデータはresponseとして受け取る

          $('.cart-items').html(response.cartItems);
          // カートの内容を更新するため、cart-itemsクラスを持つ要素のHTMLをresponseのcartItemsで置き換える

          $('.total-price').html(response.totalPrice);
          // カートの合計金額を更新するため、total-priceクラスを持つ要素のHTMLをresponseのtotalPriceで置き換える
        }
      });
    });
  });

このコードは、jQueryを使用してカート機能を実装しています。ページの読み込みが完了したときに、指定した要素に対してイベントハンドラを設定します。

「カートに追加ボタン」がクリックされた場合の処理を定義しています。.add-to-cartクラスを持つ要素がクリックされると、関数が実行されます。
クリックされたボタンのdata-product-id属性からproductIdの値を取得します。
$.ajax()メソッドを使用して、サーバーに対して非同期でHTTPリクエストを送信します。
リクエストはPOSTメソッドで送信され、URLはindex.phpです。
データとして{product_id: productId}を送信します。
レスポンスのデータタイプはJSON形式であることを指定します。
レスポンスが正常に受け取られた場合、成功時の処理が実行されます。
成功時の処理では、レスポンスデータを使用してカートの内容を更新します。cart-itemsクラスを持つ要素のHTMLをresponseオブジェクトのcartItemsで置き換え、total-priceクラスを持つ要素のHTMLをresponseオブジェクトのtotalPriceで置き換えます。

同様に、「カートから削除ボタン」がクリックされた場合の処理も定義されています。.remove-from-cartクラスを持つ要素がクリックされると、関数が実行され、指定された要素の属性から削除する商品のIDを取得します。その後、AJAXリクエストが生成され、サーバーに送信されます。成功時の処理では、カートの内容を更新します。

このコードは、カート機能を持つウェブアプリケーションで使用されることを想定しています。カートに商品を追加したり、商品を削除したりすると、非同期にサーバーと通信し、カートの内容と合計金額を更新することができます。