弹窗内Order按钮AJAX传递orderData为空问题修复求助

你遇到的orderData为空的核心原因有两个：

• 弹窗的DOM结构和.item卡片是同级关系，并非嵌套结构，所以$(this).closest(".item")根本找不到对应的商品卡片元素，导致后续从item中获取的image、brand等变量全为undefined。
• 你已经在showPopup函数里拿到了完整的商品数据，但没有将这些数据留存下来供弹窗的Order按钮使用。

以下是两种可行的修复方案：

方案一：全局变量临时存储商品数据 #

直接在全局作用域存储当前弹窗对应的商品数据，点击Order按钮时直接读取：

$(document).ready(function() {
  // 存储当前弹窗的商品数据
  let currentItemData = null;

  // 绑定弹窗按钮点击事件（直接绑定到按钮，避免点击空白区域触发）
  $(".popup-order button").click(function() {
    if (!currentItemData) return;

    var userId = $(this).data("userid");
    // 直接从存储的数据中提取，无需再操作DOM
    var orderData = {
      userId: userId,
      image: currentItemData.image,
      brand: currentItemData.brand,
      carName: currentItemData.name,
      number: currentItemData.number,
      fuel: currentItemData.fuel
    };

    $.ajax({
      type: "POST",
      url: "add_to_cart.php",
      data: orderData,
      success: function(response) {
        console.log(currentItemData.brand);
        alert("Товар добавлен в корзину!");
        closePopup();
        currentItemData = null; // 清空数据，避免遗留
      },
      error: function(error) {
        console.log("Произошла ошибка при отправке запроса на сервер.");
      }
    });
  });
});

function showPopup(data) {
  // 保存当前商品数据到全局变量
  currentItemData = data;

  var dataImage = document.getElementById("popup-image");
  var dataBrand = document.getElementById("popup-brand");
  var dataName = document.getElementById("popup-name");
  var dataNumber = document.getElementById("popup-number");
  var dataFuel = document.getElementById("popup-fuel");
  var dataPrice = document.getElementById("popup-price");

  dataImage.src = data.image;
  dataBrand.innerHTML = data.brand;
  dataName.innerHTML = data.name;
  dataNumber.innerHTML = "Номер: " + data.number;
  dataFuel.innerHTML = "Бензин: " + data.fuel;
  dataPrice.innerHTML = "Цена: " + data.PriceMin + " руб.";

  popup.style.display = "flex";
}

function closePopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
  currentItemData = null; // 关闭弹窗时清空数据
}

方案二：利用弹窗元素的data属性存储数据（更优雅） #

避免使用全局变量，将商品数据存在弹窗元素的data属性中：

$(document).ready(function() {
  $(".popup-order button").click(function() {
    const popup = $("#popup");
    const currentItemData = popup.data("itemData");
    if (!currentItemData) return;

    var userId = $(this).data("userid");
    var orderData = {
      userId: userId,
      image: currentItemData.image,
      brand: currentItemData.brand,
      carName: currentItemData.name,
      number: currentItemData.number,
      fuel: currentItemData.fuel
    };

    $.ajax({
      type: "POST",
      url: "add_to_cart.php",
      data: orderData,
      success: function(response) {
        console.log(currentItemData.brand);
        alert("Товар добавлен в корзину!");
        closePopup();
      },
      error: function(error) {
        console.log("Произошла ошибка при отправке запроса на сервер.");
      }
    });
  });
});

function showPopup(data) {
  // 将数据存入弹窗元素的data属性
  $("#popup").data("itemData", data);

  var dataImage = document.getElementById("popup-image");
  var dataBrand = document.getElementById("popup-brand");
  var dataName = document.getElementById("popup-name");
  var dataNumber = document.getElementById("popup-number");
  var dataFuel = document.getElementById("popup-fuel");
  var dataPrice = document.getElementById("popup-price");

  dataImage.src = data.image;
  dataBrand.innerHTML = data.brand;
  dataName.innerHTML = data.name;
  dataNumber.innerHTML = "Номер: " + data.number;
  dataFuel.innerHTML = "Бензин: " + data.fuel;
  dataPrice.innerHTML = "Цена: " + data.PriceMin + " руб.";

  popup.style.display = "flex";
}

function closePopup() {
  var popup = document.getElementById("popup");
  popup.style.display = "none";
  $("#popup").removeData("itemData"); // 移除存储的数据
}

额外优化提示 #

• 原代码中绑定的是.popup-orderdiv的点击事件，建议直接绑定到按钮上（.popup-order button），避免点击弹窗空白区域误触发下单操作。
• 关闭弹窗时务必清空存储的商品数据，防止下次弹窗时使用旧数据。

内容的提问来源于stack exchange，提问作者Jeez