如何将HTML模态框数据提交至后端并在浏览器展示？

问题分析 #

你提供的代码存在几个关键问题，导致功能无法正常工作：

• 页面加载时就提前获取了输入框和单选按钮的值，此时用户还未进行输入或选择，拿到的是空值或固定默认值
• 单选按钮取值逻辑错误，固定获取了第二个单选框的值，而非用户实际选中的选项
• 给addBtn同时绑定了click和submit事件，逻辑冗余且存在冲突
• 缺少提交成功后将后端返回数据展示到页面的核心逻辑

完整实现方案 #

以下是修正后的完整代码，包含模态框交互、表单数据收集、后端提交、前端数据展示的完整流程：

HTML 部分 #

<!-- 打开模态框按钮 -->
<button data-open-modal type="button" class="primary-button shadow-main circle">
  <img src="../images/plus.svg" alt="添加新任务">
</button>

<!-- 数据展示区域 -->
<div id="quota-list" class="quota-list">
  <!-- 提交后的数据会动态渲染到这里 -->
</div>

<!-- 模态框 -->
<dialog id="modal">
  <div class="modal-title">设置新任务配额</div>
  <form id="create-quota-form">
    <div>
      <label for="newQuota" class="newQuota">新任务: </label>
      <input type="text" placeholder="输入新任务内容" name="text-field" class="newQuota" id="newQuota" required>
    </div>

    <div class="difficulty">任务难度</div>

    <div class="difficulty-btns">
      <input type="radio" id="difficulty1" class="diff" name="difficultyBtn" value="50" required>
      <label for="difficulty1" class="label label-1">简单 (50 分)</label>

      <input type="radio" id="difficulty2" class="diff" name="difficultyBtn" value="100">
      <label for="difficulty2" class="label label-2">中等 (100 分)</label>

      <input type="radio" id="difficulty3" class="diff" name="difficultyBtn" value="150">
      <label for="difficulty3" class="label label-3">困难 (150 分)</label>
    </div>
    <button id="cancel" value="cancel" formmethod="dialog">取消</button>
    <button type="submit" id="addBtn" value="添加任务">添加任务</button>
  </form>
</dialog>

JavaScript 部分 #

const baseUrl = "http://localhost:3001/";
const openButton = document.querySelector('[data-open-modal]');
const closeButton = document.querySelector('#cancel');
const modal = document.querySelector('#modal');
const createQuotaForm = document.getElementById('create-quota-form');
const quotaList = document.getElementById('quota-list');

// 打开模态框
openButton.addEventListener('click', () => {
  modal.showModal();
});

// 关闭模态框并重置表单
closeButton.addEventListener('click', () => {
  modal.close();
  createQuotaForm.reset();
});

// 表单提交核心逻辑
createQuotaForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  
  // 实时收集用户输入数据
  const quotaValue = document.getElementById('newQuota').value.trim();
  const difficultyValue = document.querySelector('input[name="difficultyBtn"]:checked').value;

  try {
    // 提交数据到后端接口
    const response = await axios.post(`${baseUrl}goals`, {
      title: quotaValue,
      level: difficultyValue
    });

    console.log('任务创建成功:', response.data);
    
    // 将后端返回的新任务渲染到页面
    renderQuotaItem(response.data);
    
    // 关闭模态框并清空表单
    modal.close();
    createQuotaForm.reset();
  } catch (error) {
    console.error('创建任务失败:', error);
    alert('创建任务失败，请稍后重试');
  }
});

// 动态渲染单个任务项到页面
function renderQuotaItem(quota) {
  const quotaItem = document.createElement('div');
  quotaItem.className = 'quota-item';
  quotaItem.innerHTML = `
    <h3>${quota.title}</h3>
    <p>难度分值: ${quota.level} 分</p>
  `;
  quotaList.appendChild(quotaItem);
}

// 页面初始化时加载已有任务数据
async function loadExistingQuotas() {
  try {
    const response = await axios.get(`${baseUrl}goals`);
    response.data.forEach(quota => renderQuotaItem(quota));
  } catch (error) {
    console.error('加载已有任务失败:', error);
  }
}

// 页面加载完成后自动获取已有任务
loadExistingQuotas();

关键改进说明 #

• 数据获取时机修正：在表单提交时才收集用户输入，确保拿到最新的有效内容
• 单选按钮取值优化：使用input[name="difficultyBtn"]:checked精准获取用户选中的选项值
• 事件绑定简化：直接绑定表单的submit事件，避免按钮事件的冗余冲突
• 新增数据展示逻辑：通过renderQuotaItem函数动态生成任务项，页面初始化时自动加载历史数据
• 用户体验提升：提交成功后自动关闭模态框并重置表单，失败时给出明确提示

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