Question

我有一个显示一系列复选框的html表单。复选框（一个名为“checkbox”的数组）是使用php中的循环创建的。我想使用这个数组进行一些后台处理。尝试使用如下的AJAX，但我无法使其正常工作。

请帮忙！

这是test.php：包含html表单：

<!DOCTYPE html>

<script language="javascript">
function activate(checkbox){

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        document.getElementById("ajaxState").innerHTML =xhttp.readyState;
        document.getElementById("ajaxStatus").innerHTML =xhttp.status;

        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("ajaxResponse").innerHTML = xhttp.responseText;
        }
    };
    xhttp.open("POST", "process.php", true);
    xhttp.setRequestHeader( "Content-Type", "application/json" );
    xhttp.send(JSON.stringify(checkbox));
}
</script>

<html>
<body>
<form>
<?php
for ($i=0; $i<10; $i++){
    echo "$i: ";
    echo "<input type='checkbox' name='checkbox[".$i."]'></input><br>";
}
?>

<button  type="button" name="button" onclick="activate(checkbox)" >Test</button>
</form>
<p>ajaxState: <span id="ajaxState"></span></p>
<p>ajaxStatus: <span id="ajaxStatus"></span></p>
<p>ajaxResponse: <span id="ajaxResponse"></span></p>

</body>
</html>

输出：不要得到任何回复。

process.php：解码json数据并显示数组

<?php 
$data = file_get_contents( "php://input" );
$checkbox = json_decode( $data, true ); 

echo "Hello!<br>";
var_dump($checkbox);
?>

注意：如果在按钮元素中使用this.checkbox，则var_dump将返回NULL。

<button  type="button" name="button" onclick="activate(this.checkbox)" >Test</button>

响应： ajaxState：4

ajaxStatus：200

ajaxResponse：您好！ NULL

Answer 1

检查以下代码......

<!DOCTYPE html>

<script language="javascript">
function activate(){

    /*getting all inputs*/
    var inputs = document.getElementsByTagName("input");
    var cbs = []; //will contain all checkboxes
    var checked = []; //will contain all checked checkboxes
    for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].type == "checkbox") {
        cbs.push(inputs[i]);
        if (inputs[i].checked) {
          checked.push(inputs[i]);
        }
      }
    }

    //then making a request
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        document.getElementById("ajaxState").innerHTML =xhttp.readyState;
        document.getElementById("ajaxStatus").innerHTML =xhttp.status;

        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("ajaxResponse").innerHTML = xhttp.responseText;
        }
    };
    console.log(xhttp);
    xhttp.open("POST", "process.php", true);
    xhttp.setRequestHeader( "Content-Type", "application/json" );
    xhttp.send(JSON.stringify(checked));//sending checked instead of checkbox
}
</script>

<html>
<body>
<form>
<?php
for ($i=0; $i<10; $i++){
    echo "$i: ";
    echo "<input type='checkbox' name='checkbox[".$i."]'></input><br>";
}
?>

<button  type="button" name="button" onclick="activate()" >Test</button>
</form>
<p>ajaxState: <span id="ajaxState"></span></p>
<p>ajaxStatus: <span id="ajaxStatus"></span></p>
<p>ajaxResponse: <span id="ajaxResponse"></span></p>


</body>
</html>

使用this获取所有复选框

Answer 2

更好地使用查询，请参阅jQuery - AJAX 这里实现“点击按钮并在ajax中显示id当前按钮，用于第二个所需任务”。如果我对你有所了解。

let numInBool =     NSNumber(bool: true) 
let boolInNum =     numInBool.boolValue

和php文件

{{--include jQuery CDN Library--}}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<button  type="button" name="1" id="test" >Test</button>
<button  type="button" name="2" id="test" >Test</button>
<button  type="button" name="3" id="test" >Test</button>
...

<style>   
 $("button#test").change(function(){
var id = $(this).attr('name');
    $.ajax({
        method: 'POST',
        url:    'process.php',
        data:   {id: id}
    })
        .done(function(msg){
            console.log('button: ' + msg);
        });
});    
</style>

它是更简单的实现代码，来自相同的JavaScript代码

创建一个checkbox数组并将其传递给javascript函数

2 个答案: