如何将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

这就是它。