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

Question

我对编程非常陌生，这可能听起来很愚蠢，但是你们中的任何人都可以帮助我吗？我正在使用 node.js 设计一个购物车页面，它会立即添加每个项目。有两个按钮更新和删除，除了这些按钮之外一切正常。谁能帮我让这些按钮正常工作。 谢谢

这是我的代码。

购物车.js

var express = require('express');
var router = express.Router();

router.all('/', function (req, res, next) {
    var cartTgt = [];
if (req.session.cart !== undefined) {
    cartTgt = req.session.cart;
}
res.render('cart', {title: 'Your Cart', cart: cartTgt,message: 'Successfully Added'});
});

module.exports = router;

order.js

var express = require('express');
var router = express.Router();
router.all('/', function (req, res, next) {
var message = '';
if (req.method === 'POST') {
    if (req.session.cart === undefined) {
        req.session.cart = [];
    }
    var item = {};
    item.itemname = req.body.itemname;
    item.quantity = req.body.quantity;
    req.session.cart.push(item);
    console.log(req.session.cart);
}
res.render('order', {title: 'Order Form', message: 'The item has been added to the cart!'});
});

module.exports = router;

购物车.jade

html
head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')
body
    header
        h1= title
        hr
    section
    form(method='post' action='/cart')
        table
            thead
                tr
                    th Item Name
                    th Quantity
                    th Update
                    th Delete
            tbody
                each item in cart
                    tr
                        td #{item.itemname}
                        td #{item.quantity}
                        td: input(type='submit',value='Update')
                        td: form(method='post' action='/cart')                    
                                input(type='submit',value='Delete')

    br
    p= message

订单. Jade

html  
head    
    title= title    
    link(rel='stylesheet', href='/stylesheets/style.css')  
body    
    h1= title    
    hr    
    form(method='POST', action='/order')      
        label Item Name:      
        br      
        input(type='text', name='itemname')      
        br      
        label Quantity:      
        br      
        input(type='text', name='quantity')      
        br      
        input(type='submit')
    br
    a(href='/') Home Page
    br
    a(href='/cart') Cart Page
    hr
    p= message

Answer 1

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

Cart.jade

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

Cart.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 标签对此有利。