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

Posted 2023-02-24

【中文标题】如何使用ajax制作多选复选框并且没有按钮提交

【英文标题】：how to make multiple select checkbox with ajax and no button submit

【发布时间】：2022-01-07 11:10:22

【问题描述】：

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>

【参考方案1】：

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

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

【讨论】：

延迟是个好主意。用户单击每个复选框需要时间，因此不要立即提交请求。每个 onChange 都会重置延迟。最后，用户暂停了足够长的时间以提交 AJAX 请求。很多购物网站都应该实现这一点。

谢谢！我完全同意，提交按钮被高估了：D 当您在 keyup 事件上实现搜索输入和触发请求时，同样的延迟原则也很有效。如果你给它 0.5-1 秒的延迟，它并不是那么激烈，但它允许用户编写（或单击）他们想要的选项，并且只有在延迟到期后它才会触发具有最终值的请求。

@thegman1001 我明白这一点，所以我做到了。但这不是我需要的。现在它像这样工作 - 每次选择一个复选框时，旧的（以前的）过滤器都会被重置，我会得到一个新的过滤器。我需要在前一个过滤器中添加一个新过滤器，所有这一切都通过 ajax 而没有发送按钮

@Ivan 不确定您的代码的其余部分如何，但您必须以支持使用新选择的值扩展先前值的方式处理它。我假设您遇到了问题，因为 for 循环中的每个复选框都具有相同的名称。当一个复选框被选中时，您应该将该值推送到一个数组或在取消选中它时将其从数组中删除。