記入日:2023-06-01 編集日:2023-06-01
PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法を解説してみようと思います。
この記事を読むと(約5分)
PHPとJavaScriptを使用してAJAXで非同期にカートの中身を再計算・表示する方法をイメージできます。
以下のコード例では、送信側では配列データをJSON形式に変換し、HTTPリクエストのボディに埋め込んで送信しています。受信側では受け取ったJSONデータを解析し、商品IDと数量を表示しています。
ただし、上記の例ではエラーハンドリングやセキュリティ対策などは考慮されていません。実際のシステムでは、エラーチェックやバリデーション、認証、データベースへの書き込みなどの処理を適切に実装する必要があります。また、セキュリティ上の懸念がある場合は、HTTPSの使用や認証情報の暗号化などの対策も検討してください。
以下のコードは、商品の一覧とショッピングカート機能を持つウェブページです。
session_start(); // 商品一覧 $products = [ ['id' => 1, 'name' => '商品A', 'price' => 1000], ['id' => 2, 'name' => '商品B', 'price' => 2000], ['id' => 3, 'name' => '商品C', 'price' => 1500] ]; // カートに商品を追加 if (isset($_POST['product_id'])) { $productId = $_POST['product_id']; $product = getProductById($productId); if ($product) { addToCart($product); } } // カートから商品を削除 if (isset($_POST['remove_id'])) { $removeId = $_POST['remove_id']; removeFromCart($removeId); } // カートの合計金額を計算 function calculateTotalPrice() { $total = 0; if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $item) { $total += $item['price']; } } return $total; } // 商品IDで商品を取得 function getProductById($id) { global $products; foreach ($products as $product) { if ($product['id'] == $id) { return $product; } } return null; } // カートに商品を追加 function addToCart($product) { if (!isset($_SESSION['cart'])) { $_SESSION['cart'] = []; } $_SESSION['cart'][] = $product; } // カートから商品を削除 function removeFromCart($id) { if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $index => $item) { if ($item['id'] == $id) { unset($_SESSION['cart'][$index]); break; } } $_SESSION['cart'] = array_values($_SESSION['cart']); } } // カートのアイテムを表示するHTMLを生成 function renderCartItems() { $html = ''; if (isset($_SESSION['cart'])) { foreach ($_SESSION['cart'] as $item) { $html .= '<li>'; $html .= $item['name'] . ' - ' . $item['price'] . '円'; $html .= '<button class="remove-from-cart" data-remove-id="' . $item['id'] . '">削除</button>'; $html .= '</li>'; } } else { $html .= '<li>カートは空です</li>'; } return $html; } // JSONレスポンスを返す function jsonResponse($data) { header('Content-Type: application/json'); echo json_encode($data); exit(); } // Ajaxリクエストかどうかをチェック function isAjaxRequest() { return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'; } // カートの内容と合計金額を返す function getCartData() { $cartItems = renderCartItems(); $totalPrice = calculateTotalPrice(); return [ 'cartItems' => $cartItems, 'totalPrice' => $totalPrice ]; } // カートに商品を追加または削除した後、Ajaxリクエストかどうかをチェックしてレスポンスを返す if (isset($_POST['product_id']) || isset($_POST['remove_id'])) { $cartData = getCartData(); if (isAjaxRequest()) { jsonResponse($cartData); } }
<!DOCTYPE html> <html> <head> <title>商品一覧</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { // カートに追加ボタンがクリックされた時の処理 $(document).on('click', '.add-to-cart', function() { var productId = $(this).data('product-id'); $.ajax({ type: 'POST', url: 'index.php', data: {product_id: productId}, dataType: 'json', success: function(response) { // カートの内容を更新 $('.cart-items').html(response.cartItems); $('.total-price').html(response.totalPrice); } }); }); // カートから削除ボタンがクリックされた時の処理 $(document).on('click', '.remove-from-cart', function() { var removeId = $(this).data('remove-id'); $.ajax({ type: 'POST', url: 'index.php', data: {remove_id: removeId}, dataType: 'json', success: function(response) { // カートの内容を更新 $('.cart-items').html(response.cartItems); $('.total-price').html(response.totalPrice); } }); }); }); </script> </head> <body> <h1>商品一覧</h1> <ul> <?php foreach ($products as $product): ?> <li> <?php echo $product['name']; ?> - <?php echo $product['price']; ?>円 <button class="add-to-cart" data-product-id="<?php echo $product['id']; ?>">カートに入れる</button> </li> <?php endforeach; ?> </ul> <h2>カート</h2> <div> <h3>カートの中身</h3> <ul class="cart-items"> <?php echo renderCartItems(); ?> </ul> <h3>合計金額: <span class="total-price"><?php echo calculateTotalPrice(); ?></span>円</h3> </div> </body> </html>
SQLの使いどころ
サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。
SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。
また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。
KK
機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。