javascript - 如何通过jquery ajax提交checkbox？

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...
                 }
    });
});

但是当我单击复选框时什么也没有发生。我怎样才能解决这个问题？

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

Answer 1

您缺少 data 属性。

参见:JQuery $.ajax() post - data in a 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>