如何通过在Django中按一个按钮来获取一个div的值

如何解决如何通过在Django中按一个按钮来获取一个div的值

下午好，我来问一个问题。

我有一个在线订购网站，我的所有产品都显示在网络上，旁边有一个按钮，用于添加产品（到购物篮）

问题是，单击按钮后我不知道如何获取数据。

Models.py（购物车）：

from django.db import models

# Create your models here.
class Cart(models.Model):
    titulo = models.CharField(max_length=100)
    precio = models.FloatField(default=0)
    unidades = models.IntegerField(default=0)
    imagen = models.ImageField(default="null",blank=True)
    slug_cart = models.CharField(verbose_name="Vinculo",max_length=100)
    usuario = models.CharField(max_length=99)
    creado_el = models.DateField(auto_now_add=True)
    actualizado_el = models.DateField(auto_now=True)

    class Meta:
        verbose_name = "Cesta"
        verbose_name_plural = "Cestas"

    def __str__(self):
        return self.titulo

Models.py（Food）：

from django.db import models
from ckeditor.fields import RichTextField

# Create your models here.

class Food(models.Model):
    titulo = models.CharField(max_length=100)
    descripcion = RichTextField()
    precio = models.FloatField(default=0)
    unidades = models.IntegerField(default=0,blank=True)
    publico = models.BooleanField(verbose_name="¿Publico?")
    imagen = models.ImageField(default="null",upload_to="foods")
    slug_food = models.CharField(verbose_name="Vinculo",max_length=100)
    creado_el = models.DateField(auto_now_add=True)
    actualizado_el = models.DateField(auto_now=True)
    

    class Meta:
        verbose_name = "Comida"
        verbose_name_plural = "Comidas"

    def __str__(self):
        return self.titulo

views.py（购物车应用）：

def anadir_cesta(request):
    username=None
    if request.user.is_authenticated:
        username = request.user.username
        cesta = Cart(
                titulo = titulo,precio = precio,unidades = unidades,imagen = imagen
            )
            cesta.save()

带有食物的HTML页面：

{% extends 'layouts/layout.html' %}

{% block titulo %}
{{page.titulo}}
{% endblock titulo %}

{% block contenido %}
<div id="tittle-page">{{page.slug}}</div>
<div id="food-design">
        <br>
        <br>
        
        {% for comida in comidas %}


            {% if comida.slug_food == page.slug  %}
            <div class="food2" id="cardchange-{{comida.id}}" onmouseenter="mouseEnterMethod('{{comida.id}}')" onmouseleave="mouseLeaveMethod('{{comida.id}}')">
                <div class="food-title" id="oculttitle-{{comida.id}}">{{comida.titulo}}</div>
                <div class="food-price" id="ocultprice-{{comida.id}}">{{comida.precio|floatformat:"-1"}}€</div>
                <button class="button" id="buttonstyles-{{comida.id}}" onclick="showDescription('{{comida.id}}')" onmouseenter="mouseEnterButton('{{comida.id}}')" onmouseleave="mouseLeaveButton('{{comida.id}}')">ver+</button>
                <div class="food-description" id="showtext-{{comida.id}}" >
                {{comida.descripcion|safe}}
                </div>

                
                <button class="add-cart" id="ocultcart-{{comida.id}}" onclick="addElementToCart('{{comida.id}}')" onmouseenter="mouseEnterAddCart('{{comida.id}}')" onmouseleave="mouseLeaveAddCart('{{comida.id}}')">AÑADIR AL PEDIDO</button>

                {% if comida.imagen != null %}
                    <img id="opaimg-{{comida.id}}" src="{{comida.imagen.url}}"></img>
                {% endif %}

            </div>

            
                {% endif %}


        {% endfor %}

</div>
{% endblock contenido %}

JavaScript：

function mouseEnterMethod(comidaId){
    var showText = document.getElementById("showtext-" + comidaId);
    if (showText.style.display === "block"){
        document.getElementById("cardchange-" + comidaId).style.backgroundColor = "#dedede";
        document.getElementById("buttonstyles-" + comidaId).style.background = "white";

    } else {
    
    document.getElementById("cardchange-" + comidaId).style.background = "#ffcd00";
    document.getElementById("ocultcart-" + comidaId).style.background = "white";
    document.getElementById("buttonstyles-" + comidaId).style.background = "white";
}
}

function mouseLeaveMethod(comidaId){
    
    document.getElementById("cardchange-" + comidaId).style.background = "white";
    document.getElementById("ocultcart-" + comidaId).style.background = "#ffcd00";
    document.getElementById("buttonstyles-" + comidaId).style.background = "#ffcd00";
}

function mouseEnterAddCart(comidaId){

    document.getElementById("ocultcart-" + comidaId).style.background = "#333";
    document.getElementById("ocultcart-" + comidaId).style.color = "white";
}

function mouseLeaveAddCart(comidaId){
    
    document.getElementById("ocultcart-" + comidaId).style.background = "white";
    document.getElementById("ocultcart-" + comidaId).style.color = "#333";
}

function mouseEnterButton(comidaId){

    document.getElementById("buttonstyles-" + comidaId).style.background = "#333";
    document.getElementById("buttonstyles-" + comidaId).style.color = "white";
}

function mouseLeaveButton(comidaId){
    
    document.getElementById("buttonstyles-" + comidaId).style.background = "white";
    document.getElementById("buttonstyles-" + comidaId).style.color = "#333";
}

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("navbar").style.top = "0";
    
} else {
    document.getElementById("navbar").style.top = "110px";
}
}


function showDescription(comidaId){
    var showText = document.getElementById("showtext-" + comidaId);
    if (showText.style.display === "block"){
        showText.style.display = "none";
        document.getElementById("oculttitle-" + comidaId).style.opacity = "1";
        document.getElementById("ocultprice-" + comidaId).style.opacity = "1";
        document.getElementById("cardchange-" + comidaId).style.backgroundColor = "#ffcd00";
        document.getElementById("cardchange-" + comidaId).style.opacity = "1";
        document.getElementById("ocultcart-" + comidaId).style.opacity = "1";
        document.getElementById("ocultcart-" + comidaId).style.backgroundColor = "white";
        document.getElementById("opaimg-" + comidaId).style.opacity = "1";
        document.getElementById("buttonstyles-" + comidaId).style.backgroundColor = "#333";
        
    } else {
        showText.style.display = "block";
        document.getElementById("oculttitle-" + comidaId).style.opacity = "0";
        document.getElementById("ocultprice-" + comidaId).style.opacity = "0";
        document.getElementById("cardchange-" + comidaId).style.backgroundColor = "#dedede";
        document.getElementById("cardchange-" + comidaId).style.opacity = "0.8";
        document.getElementById("ocultcart-" + comidaId).style.opacity = "0";
        document.getElementById("opaimg-" + comidaId).style.opacity = "0.2";
        document.getElementById("buttonstyles-" + comidaId).style.backgroundColor = "#333";
    }
}
contador=0;
function addElementToCart(comidaId){
    var addToCart = document.getElementById("buttonstyles-" + comidaId);
    contador=contador+1;
    document.getElementById("contador").textContent = contador;


}

谢谢！我希望你能帮助我