Question

我有以下代码方案，我从服务器获取一些数据并且我根据不同的会话标准显示数据，但它让我看到Reference error ajProductDataFromServer is not defined in showProduct。

似乎showProduct没有对数据的引用，但我无法弄清楚差距在哪里，请帮助我！在getAjax中，我将ajDataFromServer传递给回调，在这种情况下为getProductData。那么showProduct是否也不能访问该数据？

// GLOBAL ARRAY for storing any DATA from the SERVER
var ajDataFromServer = [];

// Main ajax function using callback for getting data from the server
function getAjax(sUrl, callback) {
  var ajax = new XMLHttpRequest();
  ajax.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      ajDataFromServer = JSON.parse(this.responseText);
      callback(ajDataFromServer);
    }
  }

  ajax.open("GET", sUrl, true);
  ajax.send();

}

/************************************************************************/

// INITIALIZE / populate home page with products
document.addEventListener("load", function() {
  getAjax("api_get_products.php", getProductData);
});
getProductData();

/************************************************************************/
// GET ALL PRODUCTS and display them with diffrent features according role
function getProductData(ajProductDataFromServer) {

  if (sSessionRole === "admin") {
    //console.log( "PRODUCTS ARE EDITABLE" );
    showProductAdmin();

  } else if (sSessionRole === "user") {
    //console.log( "PRODUCTS ARE AVAILABLE FOR USER" );
    showProduct();

  } else {
    //console.log( "PRODUCTS AVAILABLE FOR PUBLIC" );
    showProduct();
  }
}

/************************************************************************/

// DISPLAY PRODUCTS for USER / PUBLIC dinamically using a loop and then INSERT into HTML
function showProduct() {
  lblProductList.innerHTML = "";

  for (var i = 0; i < ajProductDataFromServer.length; i++) {

    var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

    lblProductList.insertAdjacentHTML('beforeend', lblProduct);
  }

}

Answer 1

有两个问题。

首先，您在getProductData();调用之外调用getAjax()，因此它在AJAX完成之前运行。您也是在没有参数的情况下调用它，因此ajProductDataFromServer将是undefined。我不确定你为什么会这样，它应该被删除。

其次，showProduct()正在尝试使用变量ajProductDataFromServer，但这是getProductData()中的局部变量。您需要将其作为参数传递：

function getProductData(ajProductDataFromServer) {

  if (sSessionRole === "admin") {
    //console.log( "PRODUCTS ARE EDITABLE" );
    showProductAdmin(ajProductDataFromServer);

  } else if (sSessionRole === "user") {
    //console.log( "PRODUCTS ARE AVAILABLE FOR USER" );
    showProduct(ajProductDataFromServer);

  } else {
    //console.log( "PRODUCTS AVAILABLE FOR PUBLIC" );
    showProduct(ajProductDataFromServer);
  }
}

function showProduct(ajProductDataFromServer) {
  lblProductList.innerHTML = "";

  for (var i = 0; i < ajProductDataFromServer.length; i++) {

    var lblProduct = '<div class ="lblProduct">' + '<a href="#' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '" width="85%" class="lblProductImage" alt="product">' + '</a>' + '<a href="#_" class="lightbox" id="' + ajProductDataFromServer[i].image + '">' + '<img src="' + ajProductDataFromServer[i].image + '">' + '</a>' + '<h3 class ="lblProductName">' + ajProductDataFromServer[i].name + '</h3>' + '<h3 class ="lblProductPrice">' + 'Price:' + ' ' + ajProductDataFromServer[i].price + '<h3 class ="lblProductQuantity">' + 'Quantity:' + ' ' + ajProductDataFromServer[i].quantity + '</h3>' + '<button class="btnBuyProduct" data-productId="' + ajProductDataFromServer[i].id + '" >' + 'BUY PRODUCT' + '</button>' + '</div>';

    lblProductList.insertAdjacentHTML('beforeend', lblProduct);
  }

}

Answer 2

在getProductData中，您将名为ajProductDataFromServer的变量声明为参数名称。

这使它成为getProductData函数范围内的局部变量。

你永远不会在该函数中使用该变量。

同时

在showProduct内，您尝试（多次）从名为ajProductDataFromServer的变量中读取数据，但您尚未声明一个。

唯一的ajProductDataFromServer变量存在于不同的函数中。

showProduct无法访问getProductData个变量只是因为对showProduct的调用位于getProductData内。

您需要明确传递数据。

另外，getProductData被调用两次。一次作为Ajax的回调，一次在添加事件监听器之后立即。

getProductData();不带参数调用它，以便时间ajProductDataFromServer无论如何都会undefined。

未定义来自服务器的数据：引用错误

2 个答案: