如何使用ajax制作多选复选框并且没有按钮提交

Question

Python 3.9 Django 3.2 我有 category 和 product ，通过模板中的一个简单表格，我选择了 1 或 2-3 个复选框，我得到了结果。 现在如何通过 ajax 而没有按钮“提交”。

我选择了几个产品类别，每次点击复选框都是 ajax 然后单击复选框将参数添加到请求中。

这类似于您在网上商店中选择多个参数的方式。您选择了 2 个参数并收到了经过筛选的产品列表

我想你需要拦截发送，在缓存中存储一​​个请求并在这个请求中添加一个新的

              <form  method="post" id="category-box">
                {% csrf_token %}
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name='category' value="{{c.name}}" >
                  <label class="form-check-label" for="{{c.name}}"><a href="{{ c.get_absolute_url }}">{{ c.name }}</a></label>
                </div>
                {% endfor %}
                <button type="submit">Submit</button>
              </form>

Answer 1

您可以在form 元素上设置onChange，当表单中的任何输入发生更改时触发。当表单发生变化时，您发送带有更新参数的 AJAX 请求并加载新数据。

虽然这可能会损害性能，但在短时间内单击多个复选框会触发每次单击的请求，这是不必要的。这可以在发送请求之前稍微延迟处理，并检查表单是否随后发生了变化。