使用node.js更新和删除按钮

解决方案：您正在使用嵌套表单来更新和删除，此外，您没有发送要更新或删除的物料数量。因此，更好的选择是消除嵌套表单并使用简单的锚标记，在锚标记中，您可以发送查询字符串中包含itemname的GET请求，在cart.js上检索itemname并根据需要更新req.session.cart。

推车翡翠

 td: a(href='http://yourwesite/cart/update?item='+item.itemname) Update
 td: a(href='http://yourwesite/cart/delete?item='+item.itemname) Delete

手推车Js

app.get('/update',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.map(function(value,index,array){
   if(value.itemname === req.query.itemname){
    value.quantity +=1;
   }
   return value;
 });
 req.session.cart = temp;
 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});
app.get('/delete',function(req,res,next){
 // get the itemname from querystring using req.query.itemname
 // and perform operations in the req.session.cart array
 var temp = req.session.cart.filter(function(value,index,array){
   if(value.itemname === req.query.itemname){
    // remove the item from the cart array
    return false; 
   }
    return true;
 });
 req.session.cart = temp;
 res.render('cart', {title: 'Your Cart', cart: req.session.cart, message: 'Successfully Added'});
});

注意：如果你必须使用POST请求，那么你必须有两个单独的表格。但您也可以使用GET请求来实现它，因此a标签对此是有利的。

在这两种情况下：

• 表格应该是每个项目的表格，而不是整个表格的表格。考虑到没有更多的问题，无论按下哪个"更新"按钮，都只会更改一个项目。

• 提交表单时也不会将项目名称发送到服务器。使用HTML表单时，您希望在请求中发送的所有内容都必须在<input>标记内（或者使用XMLHttpRequest并手动指定所需内容）。我建议添加一个隐藏字段来存储它，如下所示：

input(type='hidden' name='itemname' value='#{item.itemname}')

此外，您不能嵌套HTML表单，因此表中使用的两个表单必须分开。最后，你确定一切都按预期进行吗？如果不在购物车页面中使用该数量的输入标记，则无法编辑该数量。

我建议你把你的代码（cart.jade内部）改成这样：

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    //form(method='post' action='/cart') -> Moved below
    table
        thead
            tr
                th Item Name
                th Quantity
                // No th Update, explained why below
                th Delete
        tbody
            each item in cart
                tr
                    td #{item.itemname}
                    // The whole form needs to be inside a single <td> tag, so the quantity and update columns are merged together
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')
                        // Expose the quantity as a editable text box (in an input so it gets sent)
                        input(type='number' name='quantity' value='#{item.quantity}')
                        input(type='submit' value='Update')
                    // The delete button form, completely contained in the <td> tag
                    td
                      form(method='post' action='/cart')
                        // Send the item's name
                        input(type='hidden' name='itemname' value='#{item.itemname}')
                        input(type='submit' value='Delete')
    br
    p= message

为了避免重复的隐藏输入，您可以尝试发送不带表单的请求：使用XMLHttpRequest。我建议不要直接使用它，所以试试像qwest或jQuery这样的库。