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

我有以下代码场景，其中我从服务器获取一些数据，并根据不同的会话条件显示数据，但是它给我带来了一个

参考错误，showProduct

中未定义ajProductDataFromServer

似乎

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);
  }

}

//用于存储来自服务器的任何数据的全局数组
var ajDataFromServer=[]；
//使用回调函数从服务器获取数据的主ajax函数
函数getAjax（sUrl，回调）{
var ajax=new-XMLHttpRequest（）；
ajax.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
ajDataFromServer=JSON.parse（this.responseText）；
回调（ajDataFromServer）；
}
}
open（“GET”，sUrl，true）；
ajax.send（）；
}
/************************************************************************/
//使用产品初始化/填充主页
document.addEventListener（“加载”，函数（）{
getAjax（“api\u get\u products.php”，getProductData）；
});
getProductData（）；
/************************************************************************/
//获取所有产品，并根据角色以不同的特征进行展示
函数getProductData（ajProductDataFromServer）{
如果（sSessionRole==“管理员”）{
//console.log（“产品可编辑”）；
showProductAdmin（）；
}else if（sSessionRole==“用户”）{
//console.log（“产品可供用户使用”）；
showProduct（）；
}否则{
//console.log（“可供公众使用的产品”）；
showProduct（）；
}
}
/************************************************************************/
//使用循环为用户/公众直观地显示产品，然后插入HTML
函数showProduct（）{
lblProductList.innerHTML=“”；
对于（var i=0；i

有两个问题

首先，调用

getProductData（）在
getAjax（）
调用之外，因此它在AJAX完成之前运行。您也在无参数地调用它，因此
ajProductDataFromServer
将是
未定义的
。我不知道你为什么有这个，它可能应该被删除

其次，
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);
  }

}

函数getProductData（ajProductDataFromServer）{
如果（sSessionRole==“管理员”）{
//console.log（“产品可编辑”）；
showProductAdmin（ajProductDataFromServer）；
}else if（sSessionRole==“用户”）{
//console.log（“产品可供用户使用”）；
showProduct（ajProductDataFromServer）；
}否则{
//console.log（“可供公众使用的产品”）；
showProduct（ajProductDataFromServer）；
}
}
函数showProduct（ajProductDataFromServer）{
lblProductList.innerHTML=“”；
对于（var i=0；i

有两个问题

首先，调用

getProductData（）在
getAjax（）
调用之外，因此它在AJAX完成之前运行。您也在无参数地调用它，因此
ajProductDataFromServer
将是
未定义的
。我不知道你为什么有这个，它可能应该被删除

其次，
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);
  }

}

函数getProductData（ajProductDataFromServer）{
如果（sSessionRole==“管理员”）{
//console.log（“产品可编辑”）；
showProductAdmin（ajProductDataFromServer）；
}else if（sSessionRole==“用户”）{
//console.log（“产品可供用户使用”）；
showProduct（ajProductDataFromServer）；
}否则{
//console.log（“可供公众使用的产品”）；
showProduct（ajProductDataFromServer）；
}
}
函数showProduct（ajProductDataFromServer）{
lblProductList.innerHTML=“”；
对于（var i=0；i

在

getProductData

中，将名为

ajProductDataFromServer

的变量声明为参数名

这使得它成为

getProductData

函数范围内的局部变量

你永远不会在函数中使用这个变量

同时：

在

showProduct

中，您尝试（多次）从名为

ajProductDataFromServer

的变量中读取数据，但尚未声明

唯一的

ajProductDataFromServer

变量存在于不同的函数中

showProduct

将没有