如何通过Nunjucks渲染的表单直接生成键值对提交数据？

你想要直接得到{ attr_1: 'value_1', attr_2: 'value_2' }这样的提交结构，不需要后端额外解析，最直接的方式是在表单提交前用JavaScript动态整理数据，构造符合要求的JSON再发送。

步骤1：调整Nunjucks模板，给表单元素添加标识类 #

先修改你的模板，给每个属性-值对的容器和输入框加上类名，方便JavaScript获取元素：

<form id="attr-form" method="post" action="/your-submit-url">
  {% for item in attr_val %}
    <div class="attr-value-group">
      <!-- 用于修改属性名的输入框 -->
      <input class="attr-key" type="text" value="{{ item.attr }}" placeholder="属性名">
      <!-- 用于修改属性值的输入框 -->
      <input class="attr-value" type="text" value="{{ item.value }}" placeholder="属性值">
    </div>
  {% endfor %}
  <button type="submit">提交修改</button>
</form>

步骤2：添加JavaScript处理表单提交 #

通过监听表单的提交事件，阻止默认的表单提交行为，手动整理数据成你想要的结构，再以JSON格式发送给后端：

// 获取表单元素
const attrForm = document.getElementById('attr-form');

attrForm.addEventListener('submit', function(e) {
  // 阻止默认的表单提交（避免以form-data格式发送）
  e.preventDefault();

  // 初始化用于存储最终数据的对象
  const submitData = {};

  // 获取所有属性-值对的容器
  const attrGroups = document.querySelectorAll('.attr-value-group');
  
  attrGroups.forEach(group => {
    // 获取当前组的属性名和属性值
    const key = group.querySelector('.attr-key').value.trim();
    const value = group.querySelector('.attr-value').value.trim();

    // 只有当属性名不为空时才添加到提交数据中
    if (key) {
      submitData[key] = value;
    }
  });

  // 发送JSON格式的请求到后端
  fetch(this.action, {
    method: this.method,
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(submitData)
  })
  .then(response => {
    // 处理后端响应，比如跳转或提示成功
    if (response.ok) {
      alert('修改提交成功！');
      // 可选：刷新页面或跳转到其他页面
      // window.location.reload();
    } else {
      throw new Error('提交失败');
    }
  })
  .catch(error => {
    console.error('提交出错:', error);
    alert('提交失败，请稍后重试');
  });
});

这样处理后，后端收到的请求体就是你期望的JSON结构，不需要再做任何解析，直接使用即可。

补充说明 #

如果你的后端框架支持解析嵌套的表单数据（比如Express的body-parser开启extended: true），也可以通过调整输入框的name属性来实现，但这种方式通常还是需要后端做一次数组转对象的处理。而上面的前端处理方式是最直接满足你“无需重新解析JSON”需求的方案。

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