Django项目中如何将JS选中的食材ID数组传递至views.py？

没法直接用Python实现前端的选中交互——前端操作在浏览器端，Django运行在服务器端，必须把选中的ID数组从前端传给后端，再用Python处理。下面给两种可行的方案：

一、AJAX提交（无刷新，推荐） #

这种方式不用刷新页面，体验更流畅，适合食谱网站的交互场景。

1. 修改前端JS代码 #

替换原有的提交逻辑，用AJAX把数据发给Django后端，注意必须带上Django要求的CSRF令牌：

$(document).ready(function () {
  var selectedDivs = [];

  $(".square").click(function () {
    $(this).toggleClass("selected");
    var divId = $(this).attr("id");
    var index = selectedDivs.indexOf(divId);
    if (index === -1) {
      selectedDivs.push(divId);
    } else {
      selectedDivs.splice(index, 1);
    }
  });

  $("#submit").click(function () {
    // 发送AJAX请求到后端路由
    $.ajax({
      url: "/submit-ingredients/",  // 替换成你Django项目里的实际路由地址
      type: "POST",
      data: {
        ingredients: JSON.stringify(selectedDivs),
        csrfmiddlewaretoken: $("[name=csrfmiddlewaretoken]").val()  // 必须携带CSRF令牌
      },
      success: function(response) {
        $("#result").text("提交成功！服务器返回：" + response.message);
      },
      error: function() {
        $("#result").text("提交失败，请重试");
      }
    });
  });
});

2. 配置Django路由（urls.py） #

在项目的urls.py里添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已有路由...
    path('submit-ingredients/', views.submit_ingredients, name='submit_ingredients'),
]

3. 编写Django视图（views.py） #

接收前端数据，转成Python列表后处理：

import json
from django.http import JsonResponse

def submit_ingredients(request):
    if request.method == 'POST':
        # 解析前端传来的JSON字符串，转成Python列表
        ingredients_json = request.POST.get('ingredients')
        ingredients_list = json.loads(ingredients_json)
        
        # 这里写你的业务逻辑，比如生成食谱、存储食材等
        # ...
        
        return JsonResponse({'message': f'已收到食材：{ingredients_list}'})
    else:
        return JsonResponse({'error': '仅支持POST请求'}, status=400)

4. 页面添加CSRF令牌 #

确保HTML页面里包含Django的CSRF令牌，通常用模板标签添加：

<div>
  {% csrf_token %}
  <!-- 你的食材div区域 -->
  <button type="button" id="submit">提交食材</button>
  <div id="result"></div>
</div>

二、普通表单提交（有页面刷新） #

如果不需要无刷新体验，也可以用隐藏表单字段提交：

1. 前端HTML添加隐藏input #

<form id="ingredient-form" action="/submit-ingredients/" method="POST">
  {% csrf_token %}
  <input type="hidden" id="selected-ingredients" name="ingredients">
  <!-- 你的食材div区域 -->
  <button type="submit" id="submit">提交食材</button>
</form>

2. 修改JS逻辑同步数据 #

$(document).ready(function () {
  var selectedDivs = [];

  $(".square").click(function () {
    $(this).toggleClass("selected");
    var divId = $(this).attr("id");
    var index = selectedDivs.indexOf(divId);
    if (index === -1) {
      selectedDivs.push(divId);
    } else {
      selectedDivs.splice(index, 1);
    }
    // 实时同步选中数据到隐藏input
    $("#selected-ingredients").val(JSON.stringify(selectedDivs));
  });

  // 表单提交前再同步一次，防止用户直接点提交未更新
  $("#ingredient-form").submit(function() {
    $("#selected-ingredients").val(JSON.stringify(selectedDivs));
  });
});

3. Django视图处理 #

直接复用上面AJAX方案里的submit_ingredients视图即可，逻辑完全一致。

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