我有以下代码场景,我从服务器获取一些数据,并根据不同的 session 标准显示数据,但是它给我带来了引用错误 ajProductDataFromServer is not Define 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);
}
}
最佳答案
有两个问题。
首先,您在 getAjax()
调用之外调用 getProductData();
,因此它会在 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);
}
}
关于javascript - 来自服务器的数据未定义: reference error,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48719539/