如何通过 jquery ajax 提交复选框？

Question

我很难提交此表格：

 <form action="/someurl" method="post">
    <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5">
    <input type="checkbox" class="mychoice" name="name" value="apple"> Apple
    <input type="checkbox" class="mychoice" name="name" value="orange"> Orange
    <input type="checkbox" class="mychoice" name="name" value="pear"> Pear
  </form>

和 jquery 位：

 $('.mychoice').click( function() {
    $.ajax({
        url: '/someurl',
        type: 'post',
        dataType: 'json',
        success: function(data) {
                 //  ... do something with the data...
                 }
    });
});

但是当我点击一个复选框时没有任何反应。我怎样才能解决这个问题？

更新： 值得一提的是，该表单位于引导模式中。

原文由 Karlom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您缺少 data 属性。

有关示例，请参阅： JQuery $.ajax() post - java servlet 中的数据。

如果你想发送表单的内容，那么你可以使用 Form.serialize() ，但你可以将任何你想要的数据放入属性中。

 $(document).ready(function() {
  $('.mychoice').click(function() {
    var formData = $('#myForm').serialize();
    console.log('Posting the following: ', formData);

    $.ajax({
      url: '/someurl',
      data: formData,
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //  ... do something with the data...
      }
    });
  });
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/someurl" method="post" id="myForm">
  <input type="hidden" name="token" value="7mLw36HxPTlt4gapxLUKWOpe1GsqA0I5">
  <input type="checkbox" class="mychoice" name="name" value="apple">Apple
  <input type="checkbox" class="mychoice" name="name" value="orange">Orange
  <input type="checkbox" class="mychoice" name="name" value="pear">Pear
</form>

原文由 Dan Wilson 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果您尝试使用 csrf 令牌接收数据，请执行以下操作：

 var fd = new FormData()
fd.append('csrfmiddlewaretoken', document.getElementsByName('csrfmiddlewaretoken')[0].value)
fd.append('field_name', $("input[name='field_name']").serialize())

将返回

['field_name=9&field_name=15&field_name=10']

然后你将不得不在你的视图中解析信息（django）

原文由 Drayen Dörff 发布，翻译遵循 CC BY-SA 4.0 许可协议