Django - 从模板获取表数据到 views.py

Question

我正在制作一个餐厅应用程序，目前正在开发外卖食品功能，即用户在线订购食品。

我正在将我的 postgresql 数据库中的食物显示到我的外卖.html 模板上，并为每个食物分配一个类。每个食品都有一个“添加到购物篮”按钮，JavaScript 提供了与购物篮相关的所有功能。

我发现一些资源提到使用表单的 GET 方法，但我仍然不太确定。我很好奇如何在我的 views.py 中访问这个“篮子”并将这些值放入我的数据库中。

如果可能，我希望从表中访问食物名称、数量和价格。任何资源或帮助将不胜感激。

外卖.html

      <div class="col-sm-12 my-auto">
        <h3>Starters</h3>

        {% for starter in starters %}
            <div id="{{ starter.id }}">
            <span class="food-item-name">{{ starter.name }}</span>
            <div class="food-item-details">
                <p>{{ starter.description }}</p>
                <p class="food-item-price">{{ starter.price }}</p>
                <p>{% for a in starter.allergen.all %}{{ a.name }} | {% endfor %}</p>
                <button class="add-item-button" onclick="addToBasket(this)">Add to Basket</button>
            </div>
        {% endfor %}
        </div>
        <div>
            <h3>Mains</h3>
            {% for m in mains %}
                <div id="{{ m.id }}">
                <span class="food-item-name">{{ m.name }}</span>
                <div class="food-item-details">
                    <p>{{ m.description }}</p>
                    <p class="food-item-price">{{ m.price }}</p>
                    <p>{% for a in m.allergen.all %}{{ a.name }} | {% endfor %}</p>
                    <button class="add-item-button" onclick="addToBasket(this)">Add to Basket</button>
                </div>
            {% endfor %}
            </div>
        </div>
    </div>
</div>
<div>
    <h3>Basket</h3>

    <form method="get">
        <table id="basket" style="border: 1px solid black">
            <tr>
                <th>Item</th>
                <th>Quantity</th>
                <th>Price</th>
                <th>Total Price of Item(s)</th>
            </tr>
        </table>
        <h3 id="basket-total-price">0.0</h3>
        <button type="submit">submit</button>
    </form>

</div>

外卖.js

    function addToBasket(selected)
    {
    const id = selected.parentElement.parentElement;
    const itemName = id.getElementsByClassName("food-item-name")[0].innerText;
    const itemPrice = id.getElementsByClassName("food-item-price")[0].innerText;

    // check if item already in basket
    if (check(itemName))
    {
        updateQuantity(itemName);
        updateItemPrice(itemName);
    }

    else
    {
        const basketTable = document.getElementById("basket");
        const rowCount = basketTable.rows.length;
        const row = basketTable.insertRow(rowCount);
        const basketRowName = row.insertCell(0);
        const basketRowQuantity = row.insertCell(1);
        const basketRowPrice = row.insertCell(2)
        const basketRowTotalPrice = row.insertCell(3);

        basketRowName.className = "basket-item-name";
        basketRowQuantity.className = "basket-item-quantity";
        basketRowPrice.className = "basket-item-price";
        basketRowTotalPrice.className = "basket-item-total-price";

        basketRowName.innerText = itemName;
        basketRowPrice.innerText = itemPrice;
        basketRowQuantity.innerText = "1";

        updateItemPrice(itemName);
    }
}

        // check if item already in basket
function check(itemName)
{
    const basketTable = document.getElementById("basket");

    for(let i = 0; i < basketTable.rows.length; i++)
    {
        if (basketTable.rows[i].cells[0].innerHTML === itemName)
        {
            return true;
        }
    }
}

// update quantity field for item
function updateQuantity(itemName)
{
    const basketTable = document.getElementById("basket");

    for(let i = 0; i < basketTable.rows.length; i++)
    {
        if (basketTable.rows[i].cells[0].innerHTML === itemName){
            const itemQuantity = basketTable.rows[i].getElementsByClassName("basket-item-quantity")[0];
            let quantity = Number(itemQuantity.innerText);
            quantity += 1;
            itemQuantity.innerText = quantity;
        }
    }
}

// update price for item and total basket
function updateItemPrice(itemName)
{
    const basketTable = document.getElementById("basket");
    let itemTotal = 0;
    let basketTotal = 0;

    for (let i = 0; i < basketTable.rows.length; i++)
    {
        if (basketTable.rows[i].cells[0].innerHTML === itemName)
        {
            let itemPrice = basketTable.rows[i].getElementsByClassName("basket-item-price")[0];
            let itemQuantity = basketTable.rows[i].getElementsByClassName("basket-item-quantity")[0];
            let itemPriceTotal = basketTable.rows[i].getElementsByClassName("basket-item-total-price")[0];
            let overall = document.getElementById("basket-total-price");
            let current_price = parseFloat(overall.innerText);

            // update price for items x quantity
            itemTotal = parseFloat(itemPrice.innerText) * parseInt(itemQuantity.innerText);
            itemPriceTotal.innerText = ""+ itemTotal;

            // update basket total price
            basketTotal = current_price + itemTotal;
            overall.innerHTML = ""+basketTotal
        }
    }
}