Javascript 如何捕获复选框输入_Javascript_Jquery_Json_Ajax_Rest

Javascript 如何捕获复选框输入

javascript jquery json ajax rest

Javascript 如何捕获复选框输入,javascript,jquery,json,ajax,rest,Javascript,Jquery,Json,Ajax,Rest,我正在学习网络开发，我遇到了一个问题。我的表单中有四个复选框，我需要捕获复选框的状态。我还需要将选中的复选框id发送到REST服务，在那里我需要对每个选中的复选框执行不同的操作下面是我到现在为止所做的 <!DOCTYPE html> <html> <body> <form> <input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1"

我正在学习网络开发，我遇到了一个问题。我的表单中有四个复选框，我需要捕获复选框的状态。我还需要将选中的复选框id发送到REST服务，在那里我需要对每个选中的复选框执行不同的操作

下面是我到现在为止所做的

<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" class = "checkBoxProp" id = "1" name="checkBoxProp" value="1">Graph1<br> 
<input type="checkbox" class = "checkBoxProp" id = "2" name="checkBoxProp" value="2">Graph2<br> 
<input type="checkbox" class = "checkBoxProp" id = "3" name="checkBoxProp" value="3">Graph3<br> 
<input type="checkbox" class = "checkBoxProp" id = "4" name="checkBoxProp" value="4">Graph4<br> 
<input id="btnGetResponse" type="button" value="ClickMe!"/> 
</form>
<div> </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$("#btnGetResponse").click(function()
{
var ids = []; // empty array
$('.checkBoxProp:checked').each(function() {
    ids.push($(this).val()); // returning the value of the current element of all the elements selected
});
console.log(JSON.stringify(ids.join()));
 $.ajax({
    type: "POST",
    url: "http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
    data:  JSON.stringify(ids.join()) ,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(response)
    {
       sessionStorage.setItem(1, response);
         window.location.href = "../backbonetest/dashboardUI.html";
    },
    failure: function(response) 
    {
        alert('fail');
    }
    });
})

问题：我不是把事情复杂化了吗。我真的需要将所有复选框放在一个数组中吗？即使是，我也需要使用

join（）

，然后stringify将其发送到rest服务。我是否可以找到一种方法，在我的REST服务中不需要解析/拆分发送的字符串来获取所有选中的复选框id。我对所有这些都是新手。请引导我。

使用
```
jQueryObject.map
```
获取选中的
```
复选框值
```


当您将contentType
定义为“application/json；charset=utf-8”
时，无需对内容进行字符串化
为数据
对象设置键
，以便服务器可以使用指定的键



$（“#btnGetResponse”）。单击（函数（）{
var id=$（'.checkBoxProp:checked'）.map（函数（）{
返回此.value；
}).get（）；
log（JSON.stringify（ids.join（））；
$.ajax({
类型：“POST”，
url:“http://localhost:51349/SMS_Rest.svc/v1/usercheckboxes",
数据：{
ids:ids
},
contentType:“应用程序/json；字符集=utf-8”，
数据类型：“json”，
成功：功能（响应）{
sessionStorage.setItem（1，响应）；
window.location.href=“../backbonest/dashboardUI.html”；
},
故障：功能（响应）{
警报（“失败”）；
}
});
})

图1


图2


图3


图4


如果我选中两个复选框，日志会将我的输出显示为“2,4”
。那么“2”和“4”值的关键是什么呢。请容忍我，我是一个beginner@Unbreakable-在数据对象{ids:ids}
中，ids是键..最后一个疑问。如何在REST中捕获这一点。映射数据类型应该是什么。它是map吗？@Unbreakable，不确定你在问什么，但ids
将是通过服务器端访问数据的密钥…通常map使用密钥-值对，每个密钥唯一标识一个值。但目前在服务器上，我收到的值是ids%5B%5D=2&ids%5B%5D=3（我已选中第2个和第3个复选框）。因此，值2和3与“ids”具有相同的键。
if (firstcheckbox selected) // do something
if(secondcheckbox selected)// do something