Question

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

这是我的代码。

cart.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;

cart.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

order.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

<强>解决方案：您正在使用嵌套表单进行更新和删除，此外您还没有发送要更新或删除的项目数量。因此，更好的选择是消除嵌套表单并使用简单的锚标记，您可以在查询字符串中发送带有itemname的GET请求，并在cart.js上检索项名并更新{{1}你需要的。

<强> Cart.jade

req.session.cart

<强> Cart.Js

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

备注：如果您必须使用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标记对此有利。

Answer 2

在这两种情况下：

每个项目都应该有表格，而不是整个表格。考虑到没有其他问题，无论按下哪个“更新”按钮，都只会更改一个项目。
提交表单时，您也没有将项目名称发送到服务器。使用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等库。

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

2 个答案: