将数据从HTML插入Django模板

Question

我想将HTML模板中的数据保存到数据库模型中。每次我提交表单时，我都想覆盖这个toplaner_名称、toplaner_头像、toplaner_价格。img和span标记由JS动态更改

模板

            <form method='POST'>
                {% csrf_token %}
                <div class="player-on-map toplaner">
                    <img class='img-on-map' src="{% static 'images/ago/img1.png' %}" alt="portrait-on-map">
                    <span class="nickname">Szygenda</span>
                    <span>Price: 1500</span>                                        
                </div>
                <button type='submit'>SAVE TEAM</button>
            </form>

models.py

from django.db import models
from django.contrib.auth.models import User

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)

    def __str__(self):
        return f'{self.user.username} Profile'


class Team(models.Model):
    toplaner_name = models.CharField(max_length=30, default='k1ck/Ibo')
    toplaner_avatar = models.ImageField(default='avatar.png')
    toplaner_price = models.IntegerField()

JS

toplaners.forEach(toplaner => toplaner.querySelector('.btn').addEventListener('click', function(){
    toplaner_on_map.innerHTML = toplaner.innerHTML;
    toplaner_on_map.querySelectorAll('.btn, .position, .player-price').forEach(item => item.classList.add('hide'))
}))

urlpatterns = [
    path('', views.home, name='home'),
    path('register/', views.register, name='register'),
    path('login/', auth_views.LoginView.as_view(template_name='profilecontent/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='profilecontent/logout.html'), name='logout'),
    path('profile/', views.profile, name='profile')
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Answer 1

首先，您必须在URL.py中创建一个URL，如下所示

urlpatterns = [
    path('', views.home, name='home'),
    path('register/', views.register, name='register'),
    path('login/', auth_views.LoginView.as_view(template_name='profilecontent/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='profilecontent/logout.html'), name='logout'),
    path('profile/', views.profile, name='profile'),

    # Add new URL

    path('toplaner/', views.toplaner, name='toplaner'),


] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

然后在views.py中添加toplaner视图，如下所示

def toplaner(request):

    # Here you can get all the form data 
    if request.method == 'POST':
        field_name = request.POST.get('field_name_in_html_form')
        # Add all other required field here

然后您必须在form中添加操作url，如下所示

<form method='POST' action="{% url 'toplaner' %}">
  {% csrf_token %}
  <div class="player-on-map toplaner">
    <img class='img-on-map' src="{% static 'images/ago/img1.png' %}" alt="portrait-on-map">
    <span class="nickname">Szygenda</span>
    <span>Price: 1500</span>                                        
  </div>
  <button type='submit'>SAVE TEAM</button>
</form>

现在，当您按下submit按钮时，您将在toplaner视图中获得表单数据，在那里您可以编写进一步的逻辑