如何遍历HTML表单获取JSON数据并以POST方式提交到Django后端

可行性说明 #

该需求完全可以实现，整体分为前端表单数据收集、AJAX请求发送、Django后端数据处理返回三个环节即可完成。

第一步：修正现有模板的表单元素属性问题 #

你当前模板里循环渲染学生行时，所有select的name和id属性都是重复的，会导致后续数据收集出错，需要给每个循环项加上索引区分，修改循环部分代码如下：

{% for student in student_names %}
<!-- 给每一行加data-index属性标记索引 -->
<tr data-index="{{ forloop.counter0 }}">
  <th scope="row">
    <div class="form-group ">
      <!-- name改成带索引的格式，id也同理 -->
      <select class="form-control st" style="appearance: none;" name="admission_number_{{ forloop.counter0 }}" id="admission_number_{{ forloop.counter0 }}">
        <option value="{{student.admission_number}}">{{student.admission_number}}</option>
      </select>
    </div>
  </th>
  <td>
    <div class="form-group">
      <select class="form-control st" style="appearance: none;" name="first_name_{{ forloop.counter0 }}" id="first_name_{{ forloop.counter0 }}">
        <option value="{{student.first_name}}">{{student.first_name}}</option>
      </select>
    </div>
  </td>
  <td>
    <div class="form-group">
      <select class="form-control st" style="appearance: none;" name="last_name_{{ forloop.counter0 }}" id="last_name_{{ forloop.counter0 }}">
        <option value="{{student.last_name}}">{{student.last_name}}</option>
      </select>
    </div>
  </td>
  <td>
    <div class="form-group">
      <select class="form-control st " style="text-align: center;" name="attendance_{{ forloop.counter0 }}" id="attendance_{{ forloop.counter0 }}">
        <option value="Yes">Yes</option>
        <option value="No">No</option>
      </select>
    </div>
  </td>
</tr>
{% endfor %}

注意：给每个option加上value属性，后续取值时会更稳定。

第二步：前端遍历表单生成JSON并发送请求 #

你可以用原生JS或者jQuery来完成表单数据收集，这里以原生JS为例，监听表单提交事件，阻止默认提交行为，收集数据后通过fetch发送到后端：

document.getElementById('studentform').addEventListener('submit', function(e) {
  // 阻止表单默认提交
  e.preventDefault();
  // 收集基础字段
  const formData = {
    grade: document.getElementById('grade').value,
    subject: document.getElementById('subject').value,
    csrfmiddlewaretoken: document.querySelector('[name=csrfmiddlewaretoken]').value,
    students: []
  };
  // 遍历所有学生行收集数据
  const studentRows = document.querySelectorAll('tbody tr');
  studentRows.forEach(row => {
    const index = row.dataset.index;
    formData.students.push({
      admission_number: document.getElementById(`admission_number_${index}`).value,
      first_name: document.getElementById(`first_name_${index}`).value,
      last_name: document.getElementById(`last_name_${index}`).value,
      attendance: document.getElementById(`attendance_${index}`).value
    })
  });

  // 发送请求到Django后端
  fetch('你的Django接口路由地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': formData.csrfmiddlewaretoken
    },
    body: JSON.stringify(formData)
  })
  .then(res => res.json())
  .then(data => {
    // 这里的data就是后端返回的objects.all()对应的数据
    console.log('后端返回数据：', data);
    // 后续可以根据需求处理返回的数据，比如渲染到页面
  })
  .catch(err => console.error('请求出错：', err));
})

第三步：Django后端接收请求并返回数据 #

你需要在views.py里编写对应的接口视图，接收前端发送的JSON数据，处理完成后返回你需要的数据集，示例代码如下：

import json
from django.http import JsonResponse
from .models import YourModel # 替换成你要查询的模型类名

def get_objects_data(request):
    if request.method == 'POST':
        # 接收前端发送的JSON数据
        req_data = json.loads(request.body)
        # 这里可以根据你接收到的表单数据做业务逻辑处理，比如存attendance考勤数据
        # 示例：遍历学生考勤数据保存
        for student in req_data.get('students', []):
            # 你的业务逻辑代码
            pass
        # 查询你需要返回的objects.all()数据
        objects_list = list(YourModel.objects.all().values())
        # 返回JSON响应
        return JsonResponse({'code': 200, 'data': objects_list, 'msg': '查询成功'})
    return JsonResponse({'code': 400, 'msg': '请求方式错误'})

之后记得在urls.py里配置对应的路由映射到这个视图函数即可。

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