如何将 JQuery 选择数据转换为 Django 表单可以使用的数据

Question

我一直在 Django 网站上阅读有关 Django 的信息，表格看起来非常简单方便。

但是我不知道如何将表单与我现有的前端集成，该前端使用 JQuery 作为其部分输入。

在我的网站上，有很多框可供用户单击以选择他们感兴趣的食物类别。我创建了a simplified JSFiddle demo here

当用户提交表单时，我想知道他选择了哪些食品类别并将其作为请求的一部分进行处理。 有没有形式上的机制可以让我做到这一点？

---

代码：

HTML：

<div class="choice">
    Dairy
</div>
<div class="choice">
    Meat
</div>
<div class="choice">
    Snack
</div>
<div class="choice">
    Organic
</div>

CSS：

.choice {
    background-color: yellow;
    padding: 20px;
    display: inline-block;
    border: 1px solid black;
    border-radius: 3px;
    margin-top: 5px;
    opacity: 0.35;
}

JavaScript

$('.choice').click(function() {
    if ($(this).attr('isSelected') != "true"){
        $(this).attr('isSelected', 'true');
        $(this).css('opacity', '1');
    }
    else{
        $(this).attr('isSelected', '');
        $(this).css('opacity', '0.35');
    }
});

为方便起见，

简单示例的屏幕截图。当用户点击一个淡入淡出的框时，它的不透明度变为 1（表示它被选中），当再次点击它时，它返回淡入淡出的视图。

Answer 1

如果您在谈论用户可以切换某种输入的用户界面，那么您实际上是在谈论复选框。

如果您有 4 个复选框与相应的 div 相关联，您只需切换复选框值，然后将这些隐藏的复选框发布为 django 处理的表单。很简单的东西。复选框“名称”属性值必须与 django 表单对象（布尔）字段匹配，并且您已经设置好了。

例如html：

<input name="dairy">

Django 表单：

class MyForm(forms.Form):
    dairy = forms.BooleanField()

如果您不想在后台使用复选框，那么您可以发布 urlencoded 关联数组，其中关联数组的键是 django 表单对象（布尔）字段名称。请记住，您不需要发布 OFF 值。您只需要发布所选元素的值。例如，假设您有 4 个选项，乳制品、肉类、零食和有机，并打开了乳制品和肉类。那么您的帖子查询应如下所示：

?dairy=on&meat=on

差不多就是这样。