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

【问题标题】：How to submit checkbox through jquery ajax?如何通过jquery ajax提交复选框？
【发布时间】：2017-04-01 12:21:33
【问题描述】：

我无法提交此表单：

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

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

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

【问题讨论】：

你什么时候运行jquery代码？
它应该在引导模式上运行。
当你的代码运行时你确定你的元素在 DOM 中吗？你能发布一个 sn-p 的例子吗？
您需要在 ajax 语法中包含 data 属性。另外，我看不到您试图在哪里获得复选框的实际值。我想这会对你有所帮助。 stackoverflow.com/questions/2834350/…

标签： javascript jquery ajax

【解决方案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>

【讨论】：

数据仅用于发送post请求，否则任何数据都可以添加到url本身。
type: 'post' 是什么意思？对你来说有什么不同吗？
我没有对你投反对票，所以请穿上你的裤子。即使您仍然没有解释如何序列化表单或填充数据，所以它仍然只是答案的一半。
我没有解释如何序列化表单或填充数据，因为 Karlom 没有指定端点应该接收什么数据。我的裤子还在，只是因为我在工作。 :)
好吧，我加了data: $('#myForm').serialize(),，但还是不行。可能是因为表单在引导模式上吗？

【解决方案2】：

试试这个：

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

【讨论】：

@Mister Positive 以何种方式无法回答问题。他问他能做什么；我说试试这个。这听起来像是对我的回答，但话说回来，我这辈子只说英语。

【解决方案3】：

提供缺失的数据

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

【讨论】：

【解决方案4】：

尝试“更改”而不是“点击”，如下所示：

$('.mychoice').change(function(){...})

【讨论】：

我做了，但没有效果。我什至在 jquery 函数中添加了一个alert("clicked")，但是当我勾选复选框时它不会被触发。
@Karlom 在 Chrome 中右键单击然后选择“检查元素”，您可能有导致 javascript 停止的 javascript 错误，或者，jquery 未正确包含