我正在开发一个购物车应用程序。用户将向其存储在本地存储中的“购物车”添加商品。当用户导航到将商品添加到购物车的不同页面时,需要使用他们添加到购物车(本地存储)的商品填充该页面。我使用 Handbars 为我的页面构建模板,使用 NodeJS/ExpressJS 创建路由并填充 get/post 请求的页面,并使用 Ajax 向客户端和服务器发送请求以及从客户端和服务器发送请求。
目前,当用户访问查看购物车页面时,我第一次就可以使用它,但是在我收到“错误:发送后无法设置标头”之后立即。这也是以一种相当黑客/糟糕的方式完成的。
首先,这是我用于初始获取查看购物车页面的代码:
viewCart: function(req, res){
if(req.session.success){
res.render('base', {title: 'View Cart', userNav: true, checkoutNav: true, viewCart: true, cartIcon: true, js:js});
}else{
res.render('base', {title: 'View Cart', userNav: true, viewCart: true, cartIcon: true, js:js});
}
},
这只是渲染页面,其中没有来自本地存储的数据。
这是我调用的变量的 html,用于填充本地存储中的数据:
<div id="viewCartTable"></div>
在我的 Javascript 中,我有一个函数,它可以查看 id“viewCartTable”何时存在并执行 ajax 请求:
if(document.getElementById("viewCartTable")){
var data = localStorage.getItem("Products");
Ajax.sendRequest("/user/viewCart", function(res){
responseArr = res.responseText.split('^^^');
if(responseArr[0] === "error"){
console.log("error");
setTimeout(function(){('','#000',false)}, 1500);
}else if(responseArr[0] === "Success"){
console.log("Success");
var tableCart = document.getElementById("viewCartTable");
tableCart = tableCart.innerHTML = responseArr[1];
}}, data);
}
此 Ajax 请求被发送到查看购物车页面的帖子,我相信这可能是问题真正展开的地方。他就是这个职位:
viewCartPost: function(req, res){
var data = JSON.parse(req.body.data);
console.log(data);
var keys = Object.keys(data);
//console.log(keys);
for(var i = 0; i<keys.length; i++){
var productId = keys[i];
Product.find({productId: productId}).select({productId : 1, addProductGroupName: 1, productName: 1, productPrice: 1, productDescription: 1, filePath: 1}).exec(function(err, cartProducts){
if(err){
console.log(err);
res.send("error");
}else{
res.send("Success^^^"+cartProducts);
}
});
console.log(productId);
}
},
这是获取客户端发送过来的本地存储的信息,找到本地存储中存储和发送的与productId匹配的产品及其信息。
所以当前的设置第一次就可以工作。首次访问页面会打印本地存储中的商品数据,并向前端发送“成功”。但是在设置标题后立即给出 Cant set headers。我相信这是因为当我找到“viewCartTable”的 id 时,我正在发送 Ajax 请求。因此必须有更好的方法来触发ajax请求并将数据发送到服务器和从服务器发送回客户端。
有没有更好的方法来发出 Ajax 请求来获取所需的数据?到目前为止,加载和加载都让我的尝试失败了。任何帮助表示赞赏。谢谢。
Part 2
迭代数据并以表格格式打印。因此,在服务器端,我正在获取此函数的结果:
viewCartPost: function(req, res){
var data = JSON.parse(req.body.data);
console.log(data);
var keys = Object.keys(data);
//console.log(keys);
var promises = [];
for(var i = 0; i<keys.length; i++){
var productId = keys[i];
promises.push(Product.find({productId: productId}).select({productId : 1, addProductGroupName: 1, productName: 1, productPrice: 1, productDescription: 1, filePath: 1}).exec());
}
Promise.all(promises).then(function(results) {
// you may have to reorganize results to be exactly what you want
// to return to the client
var cartTable = viewCartTable(results);
res.send("Success^^^"+cartTable);
}).catch(function(err){
res.sendStatus(500);
});
},
并将其发送到正在构建该函数结果表的函数:
function viewCartTable(results){
console.log(results[0]);
}
现在这个函数只是查看第一个结果。这是 1 个特定产品的整个数据集。看起来像这样:
[ { _id: 583df3eead025434e61a2172,
filePath: '/public/images/df54528a827f99586135956e45f045fe.jpg',
addProductGroupName: 'Xbox One',
productName: 'Far Cry',
productPrice: 78.34,
productDescription: 'Its back again. I have never played this game but heard it is pretty good. Wanted to write an extra long description to see if someone really took the time to type such a longer sentence how exactly it would appear on things throughout the application.',
productId: 'rJUg4uiGl' } ]
在我构建这样的表的所有其他实例中,我都能够调用 results[0].productId 来获取结果的特定 ProductId。在这里,它返回一个未定义的。所有其他尝试也返回未定义。知道如何轻松迭代该数据集的每个部分吗?我觉得我对此很愚蠢,因为我无法弄清楚这一点:(