Django中实现点击按钮动态添加空白对象的方法咨询

嘿，这个需求其实挺常见的，我来给你拆解一下怎么实现点击生成空白可填写对象的功能～

核心逻辑是：点击按钮时动态添加一组包含name、surname、email的输入框，同时在JS里维护一个存储这些对象数据的数组，方便后续提交到数据库。下面分两种场景给你具体实现方案：

1. 原生HTML+JavaScript实现 #

先搭好基础的页面结构，再写点击事件的逻辑：

第一步：基础HTML结构 #

<!-- 用来存放所有对象输入组的容器 -->
<div id="formContainer">
  <!-- 默认的第一个空白对象输入组 -->
  <div class="object-group">
    <input type="text" placeholder="Name" class="name-input">
    <input type="text" placeholder="Surname" class="surname-input">
    <input type="email" placeholder="Email" class="email-input">
  </div>
</div>

<!-- 操作按钮 -->
<button id="addObjectBtn">添加新对象</button>
<button id="submitBtn">提交到数据库</button>

第二步：编写点击生成的JS逻辑 #

// 获取页面元素
const formContainer = document.getElementById('formContainer');
const addObjectBtn = document.getElementById('addObjectBtn');

// 绑定添加按钮的点击事件
addObjectBtn.addEventListener('click', () => {
  // 创建新的对象组容器
  const newGroup = document.createElement('div');
  newGroup.classList.add('object-group');

  // 创建三个输入框，并配置属性
  const createInput = (type, placeholder, className) => {
    const input = document.createElement('input');
    input.type = type;
    input.placeholder = placeholder;
    input.classList.add(className);
    return input;
  };

  const nameInput = createInput('text', 'Name', 'name-input');
  const surnameInput = createInput('text', 'Surname', 'surname-input');
  const emailInput = createInput('email', 'Email', 'email-input');

  // 把输入框挂载到新组，再把新组挂载到容器里
  newGroup.append(nameInput, surnameInput, emailInput);
  formContainer.appendChild(newGroup);
});

补充：收集数据准备提交 #

点击提交按钮时，把所有输入框的数据整理成对象数组，再传给后端接口：

const submitBtn = document.getElementById('submitBtn');

submitBtn.addEventListener('click', () => {
  const objectGroups = document.querySelectorAll('.object-group');
  const submitData = [];

  // 遍历所有输入组，收集数据
  objectGroups.forEach(group => {
    const name = group.querySelector('.name-input').value.trim();
    const surname = group.querySelector('.surname-input').value.trim();
    const email = group.querySelector('.email-input').value.trim();

    // 简单校验必填项
    if (name && surname && email) {
      submitData.push({ name, surname, email });
    }
  });

  // 这里通过fetch/axios把submitData传给后端接口
  console.log('待提交的数据：', submitData);
  // fetch('/api/save-objects', {
  //   method: 'POST',
  //   headers: { 'Content-Type': 'application/json' },
  //   body: JSON.stringify(submitData)
  // })
  // .then(res => res.json())
  // .then(() => alert('提交成功'))
  // .catch(err => console.error('提交失败：', err));
});

2. Vue框架下的简化实现 #

如果用Vue（以Vue3为例），不用手动操作DOM，直接通过响应式数组就能实现：

<template>
  <div class="form-wrapper">
    <!-- 遍历数组生成输入组 -->
    <div v-for="(obj, index) in objectList" :key="index" class="object-group">
      <input v-model="obj.name" placeholder="Name" />
      <input v-model="obj.surname" placeholder="Surname" />
      <input v-model="obj.email" type="email" placeholder="Email" />
    </div>

    <button @click="addNewObject">添加新对象</button>
    <button @click="submitData">提交到数据库</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 响应式数组，默认有一个空白对象
const objectList = ref([{ name: '', surname: '', email: '' }]);

// 添加新空白对象的方法
const addNewObject = () => {
  objectList.value.push({ name: '', surname: '', email: '' });
};

// 提交数据的方法
const submitData = () => {
  // 直接拿objectList.value就能获取所有数据
  console.log('待提交的数据：', objectList.value);
  // 调用后端接口的逻辑...
};
</script>

小优化建议 #

• 可以给每个对象组加个删除按钮，方便用户移除不需要的条目
• 增加输入校验（比如邮箱格式检查、必填项提示），避免无效数据提交

内容的提问来源于stack exchange，提问作者user15374373