来自 HTML 动态表单的 Django POST 请求

Question

我已经使用 Bootstrap 和 Javascript 开发了一个动态表单，现在我想将该信息发布到 sql3 数据库（默认 django 数据库）中，所以我在 HTML 文件、views.py 和相应的模型中提出了一个 POST REQUEST。 py

但是当我尝试从表单推送提交底部时，什么也没有发生，我认为问题是表单是如何制作的，但我不知道如何解决它。

Infraestructura.html

{% extends "Portafolio/layout.html" %}
{% load static %} 

{% block scripts %}
<script src = "{% static 'Portafolio/scriptinfra.js' %}" type="text/javascript"></script>    
{% endblock %}  

{% block content %}

<form action= "{% url 'infraestructura' %}" method="POST" class="form mt-5" id="infra">
  {% csrf_token %}
    <h1>Factibilidad Técnica y Operativa</h1>
    <h2>Análisis de Infraestructura</h2>

    <main class="container">
      <section class="row">

        <div class="col-lg-4 mb-2">
          <input name='Infraestructura' class="form-control" type="text" placeholder="Infraestructura">
        </div>

        <div class="col-lg-4 mb-2">
          <input name='Tiempo' class="form-control" type="text" placeholder="Tiempo">
        </div>

        <div class="col-lg-4 mb-2">
          <input name='Costo' class="form-control" type="text" placeholder="Costo Mensual">
        </div>      
      </section>

    </main>

    <nav class="btn-group">
      <button id='add' class='btn btn-success' type='button'>
        <i class="fa fa-plus-square"></i> Añadir
      </button>
      <button id='rem' class='btn btn-danger' type='button'>
        <i class="fa fa-minus-square"></i> Eliminar
      </button>     
    </nav>
    <!-- Submit buttom-->
        <div class="d-grid gap-2 mt-3">
          <input type="submit" class="btn btn-lg btn-primary">
        </div>
  </form>
  
{% endblock %}

views.py

def infraestructura(request):
    if request.method =='POST':
        Infraestructura = request.POST.get('Infraestructura')
        Tiempo = request.POST.get('Tiempo')
        Costo = request.POST.get('Costo')

        Infraestructura.objects.create(Infraestructura=Infraestructura, Tiempo=Tiempo, Costo=Costo)
        
    return render (request, "Portafolio/Infraestructura.html")

models.py

class Infraestructura(models.Model):
    Infraestructura= models.CharField(max_length= 64)
    Tiempo = models.IntegerField(null=True, blank=True)
    Costo = models.BigIntegerField(null=True, blank=True)

** 更新 1**

scriptinfra.js

window.onload = function(){
  const ui = document.forms.infra;
  const io = ui.elements;

  ui.onclick = addRem;

function addRem(event) {
  const clicked = event.target;
  const main = document.querySelector('.container');
  let rows = main.querySelectorAll('.row');
  
  if (clicked.matches('#add')) {
    const row = ` <section class="row"><div class="col-lg-4 mb-2"> <input name='Infraestructura' class="form-control" type="text" placeholder="Infraestructura"> </div> <div class="col-lg-4 mb-2"> <input name='Tiempo' class="form-control" type="text" placeholder="Tiempo"> </div> <div class="col-lg-4 mb-2"> <input name='Costo' class="form-control" type="text" placeholder="Costo Mensual"> </div> </section>`;
    main.insertAdjacentHTML('beforeEnd', row);
  } else if (clicked.matches('#rem') && rows.length > 1) {
    rows[rows.length-1].remove();
  } else {
    return false;
  }
}; 
}

Answer 1

在你的views.py中你已经重用了Infraestructura，所以它不再代表一个模型类。您可以通过使用小写变量名来避免这种情况。

试试这个：

def infraestructura(request):
    if request.method =='POST':
        infraestructura = request.POST.get('Infraestructura')
        tiempo = request.POST.get('Tiempo')
        costo = request.POST.get('Costo')

        Infraestructura.objects.create(Infraestructura=infraestructura, Tiempo=tiempo, Costo=costo)
        
    return render (request, "Portafolio/Infraestructura.html")

查看Django coding style 了解最佳做法。

更新

现在您已经添加了scriptinfra.js 代码，我们可以看到问题所在。

当您单击表单中的任何内容时，将调用 addRem 函数。如果您单击任何不符合您的规则的任何内容，该函数将返回 false。发生这种情况时，链接将不起作用，表单也不会提交。

删除else 和return false 看看效果如何。