小编典典

如何在页面加载时使用JavaScript发出成功的Ajax请求

ajax

我正在处理购物车应用程序。用户会将项目添加到他们的“购物车”中,该商品将存储在本地存储中。当用户导航到与将商品添加到购物车的页面不同的页面时,需要使用添加到购物车(本地存储)的商品填充页面。我使用车把为页面构建模板,使用NodeJS
/ ExpressJS创建路由并为获取/发布请求填充页面,并使用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设置头之后,将立即给出它们。我相信这是因为当我找到“
viewCartTable”的ID时,我正在发送Ajax请求。因此,必须有一种更好的方式来触发ajax请求并将数据发送到服务器或从服务器发送回客户端。

有没有更好的方法来发出此Ajax请求以获取所需的数据?到目前为止,加载和加载都使我失败了。任何帮助表示赞赏。谢谢。

第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。在这里,它返回一个未定义的。所有其他尝试也都返回了未定义。知道如何轻松地遍历此数据集的每个部分吗?我觉得我对此很愚蠢,因为我无法弄清楚:(


阅读 1013

收藏
2020-07-26

共1个答案

小编典典

此服务器代码是错误的:

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

您有res.send("Success^^^"+cartProducts);一个for循环。这意味着您要多次调用它。这意味着您尝试为此请求发送多个响应,并且触发您看到的错误。这是错误的服务器代码。对于任何给定的请求,您只需发送一个响应。

在建议哪种代码可以最好地解决此问题之前,我必须先了解所需的单个响应是什么。如果您打算执行这样的多个异步操作,并且想知道所有这些操作何时完成,则必须编写代码来跟踪它们,并在所有操作完成时得到通知,然后发送一个且只有一个响应。

可以使用计数器手动执行此操作,并使用一些代码来递增和检查计数器,也可以通过切换到使用Promise来跟踪异步操作并Promise.all()在所有异步操作都完成时通知您,从而以更易于管理的方式来完成此操作。完成。

当您在此功能中具有多个键时,要发送的单个响应是什么?


我自己对猫鼬不太了解,但是.exec()在最近的版本中,猫鼬会返回一个承诺,因此我们可以使用它来协调多个异步数据库操作,如下所示:

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
          res.json(results);              
      }).catch(function(err){
          console.error("viewCartPost", err);
          res.sendStatus(500);       
      });
    },
2020-07-26