当复选框是票时发送POST - 无需提交按钮

Question

我想在不提交按钮的情况下发送POST数据，当勾选其中一个复选框时 - 使用AJAX。

我有这样的代码，但我认为，当我勾选复选框时，我应该得到一个发布数据的警报（要知道，它的工作），但我没有得到任何反应。我已经添加的jQuery所以这是某种形式的代码功能错误..

<form method="post" name="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1</input> 
    <input type="checkbox" name="checkboxList[]" value="2">value2</input> 
    <input type="checkbox" name="checkboxList[]" value="3">value3</input> 
</form> 

<script> 

jQuery(document).ready(function($){ 

    // jQuery code is in here 
    $("input[type=checkbox]").on("click", function() { 

    var data = $(this).val(); 
    console.log(data); // 1, 2 or 3 (value) 
    $.ajax({ 
     url: "<?php echo JURI::getInstance(); ?>", // URL should be correct! 
     type: "POST", 
     async: true, 
     cache: false, 
     data: {data: data}, 
     dataType: 'text', 
     success: function(data){ 
      alert(data); 
     } 
    }); 
    }); 

}); 




</script> 

问题：获取网页的HTML内容，而不是成功的方法值

Answer 1

改变你的HTML如下1.删除</input>和变化2.变化形式name到id

<form method="post" id="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1 
    <input type="checkbox" name="checkboxList[]" value="2">value2 
    <input type="checkbox" name="checkboxList[]" value="3">value3 
</form> 

变化JS

var data = $("#form1").serialize(); 

您的表单没有选择，并在后有空白数据

Answer 2

请尝试以下代码。

<form method="post" name="form1"> 
    <input type="checkbox" name="checkboxList[]" value="1">value1</input> 
    <input type="checkbox" name="checkboxList[]" value="2">value2</input> 
    <input type="checkbox" name="checkboxList[]" value="3">value3</input> 
</form> 

<script> 
    $("input[type=checkbox]").on("click", function() { 
     var data = $("form").serialize(); 
     $.ajax({ 
      url: "../../x.php", // URL should be correct! 
      type: "POST", 
      async: true, 
      cache: false, 
      data: {data: data}, 
      dataType: 'json', 
      success: function(response_data){ 
       alert(response_data); 
      } 
     }); 
    }); 
</script>