JavaScript/jQuery动态收集多元素数据并构建数组的教程

<tbody class="table-border" id="My_OrderCart_tbody">
  <tr>
    <div class="row-fluid gx-2 px-2">
      <dl data-place_id="dl7557">
        <dd class="px-1">J. De Telmont Grand Reserve Brut NV Champagne (15Litre)</dd>
      </dl>
    </div>
    <!-- ... 其他产品数据 ... -->
  </tr>
  <tr>
    <div class="row-fluid gx-2 px-2">
      <dl data-place_id="dl7556">
        <dd class="px-1">Taittinger Reserve Vintage Brut Champagne</dd>
      </dl>
    </div>
    <!-- ... 其他产品数据 ... -->
  </tr>
</tbody>

$(document).on('click', '#saveBtn, #view-table', function() {
  $('#My_OrderCart_tbody tbody tr').each(function() {
    var data_id = $(this).find("dl[data-place_id^=dl]").data("place_id");
  });
  console.log(data_id); // 错误发生在这里
});

$(document).on('click', '#saveBtn, #view-table', function() {
  // 1. 在循环外部声明一个空数组，用于存储收集到的ID
  let idArray = []; 

  $('#My_OrderCart_tbody tr').each(function() {
    // 2. 在循环内部，使用 let 声明局部变量获取当前元素的 ID
    // 注意：这里查找的是 dl 元素，并且其 data-place_id 属性以 'dl' 开头
    let currentId = $(this).find("dl[data-place_id^=dl]").data("place_id");

    // 3. 将当前 ID 推入之前声明的数组
    if (currentId) { // 确保获取到了有效的 ID
      idArray.push(currentId);
    }
  });

  // 4. 循环结束后，idArray 包含了所有收集到的 ID，可以在此处进行访问和处理
  console.log("收集到的所有ID:", idArray); 
  console.log("第一个ID:", idArray[0]); 
  // 此时，idArray 将是 ['dl7557', 'dl7556', ...]
});

<!-- 示例 HTML 结构片段 -->
<tr>
  <div class="row-fluid gx-2 px-2">
    <dl data-place_id="dl7557">
      <dd class="px-1">J. De Telmont Grand Reserve Brut NV Champagne (15Litre)</dd>
    </dl>
  </div>
  <div class="px-2">
    <input class="input form-control" type="number" id="Quan7557" value="1" data-id="7557">
  </div>
  <div class="mx-auto">
    <span>$</span>
    <input type="text" class="input form-control" id="Price7557" data-id="7557" value="10500">
  </div>
  <!-- ... -->
</tr>

$(document).on('click', '#saveBtn, #view-table', function() {
  let productDataArray = []; // 声明一个空数组，用于存储产品数据对象

  $('#My_OrderCart_tbody tr').each(function() {
    let $row = $(this); // 缓存当前行 jQuery 对象，提高查找效率

    // 尝试获取 data-place_id，注意原始HTML中 dl 的 data-place_id 值为 'dlXXXX'，
    // 而 Quan/Price 的 data-id 值为 'XXXX'。需要根据实际情况调整匹配逻辑。
    // 这里我们假设 data-place_id 中的数字部分与 Quan/Price 的 data-id 相同
    let placeIdWithPrefix = $row.find("dl[data-place_id^=dl]").data("place_id");
    let productId = placeIdWithPrefix ? placeIdWithPrefix.replace('dl', '') : null; // 提取数字ID

    if (productId) {
      // 获取数量和价格
      let quantity = $row.find(`#Quan${productId}`).val();
      let price = $row.find(`#Price${productId}`).val();

      // 创建一个对象来存储当前产品的相关数据
      let product = {
        id: productId,
        placeId: placeIdWithPrefix, // 也可以保留完整的 placeId
        quantity: quantity,
        price: price,
        // 如果需要，也可以存储DOM元素本身，以便后续操作
        // element: $row 
      };

      // 将产品对象推入数组
      productDataArray.push(product);
    }
  });

  console.log("收集到的所有产品数据:", productDataArray);
  // 此时，productDataArray 将是 [{id: '7557', placeId: 'dl7557', quantity: '1', price: '10500'}, ...]
});

$(document).on('click', '#saveBtn, #view-table', function() {
  let productDataArray = [];
  // ... (如上文所示，填充 productDataArray) ...

  if (productDataArray.length > 0) {
    $.ajax({
      url: "action.php", // 后端处理脚本的URL
      method: "POST",    // 使用POST方法发送数据
      dataType: "json",  // 期望服务器返回JSON格式的数据
      data: {
        action: "updateCart", // 可以添加一个动作标识符
        products: productDataArray // 将收集到的产品数据数组作为参数发送
      },
      success: function(response) {
        // 请求成功后的回调函数
        if (response.status === "success") {
          alert("购物车已更新！");
          // 更新页面UI，例如：
          // $('#order_table').html(response.order_table);
          // $('.badge').text(response.cart_item);
        } else {
          alert("更新失败: " + response.message);
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败的回调函数
        console.error("AJAX请求失败:", textStatus, errorThrown);
        alert("网络错误，请稍后再试。");
      }
    });
  } else {
    alert("购物车中没有商品需要更新。");
  }
});

<?php
// action.php
header('Content-Type: application/json');

$response = ['status' => 'error', 'message' => '未知错误'];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $action = $_POST['action'] ?? '';

    if ($action === 'updateCart') {
        $products = $_POST['products'] ?? []; // 获取产品数据数组

        if (!empty($products) && is_array($products)) {
            // 遍历产品数组，进行数据库更新或会话操作
            foreach ($products as $product) {
                $productId = $product['id'] ?? null;
                $quantity = $product['quantity'] ?? null;
                $price = $product['price'] ?? null;

                // 在这里执行您的业务逻辑，例如：
                // 更新数据库中的购物车项
                // $_SESSION['cart'][$productId] = ['quantity' => $quantity, 'price' => $price];
                // error_log("Processing product: ID={$productId}, Qty={$quantity}, Price={$price}");
            }
            $response = ['status' => 'success', 'message' => '购物车已成功更新！'];
            // 可以返回更新后的购物车HTML或总商品数量等
            // $response['order_table'] = generateUpdatedCartHtml();
            // $response['cart_item'] = getCartItemCount();
        } else {
            $response['message'] = '没有接收到有效的产品数据。';
        }
    } else {
        $response['message'] = '无效的动作。';
    }
} else {
    $response['message'] = '只接受POST请求。';
}

echo json_encode($response);
?>