jQuery封装数组使用Ajax提交
jQuery中实现多选
<input id="btn_delete" class="btn btn-danger" value="删除">
<table class="table table-hover" id="product_table">
<thead>
<tr>
<th>
<input id="check_all" type="checkbox"/>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="check_id" type="checkbox">
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
//全选
$("#check_all").click(function(){
$(".check_id").prop("checked",$(this).prop("checked"));
});
//反选 实现当复选框都选中全选框也默认选中
$(document).on("click",".check_id",function(){
var flag = $(".check_id:checked").length==$(".check_id").length;
$("#check_all").prop("checked",flag);
})
</script>
批删
方法一
$("#btn_delete").click(function(){
//Jquery得到数组
var ids = [];
//遍历选中的
$.each($(".check_id:checked"),function(){
ids.push($(this).val());//将选中的值放到数组中
});
if(confirm("确定删除吗?")){
//使用ajax提交
$.post(
"deleteByIds",
{"ids":ids},
function(result){
alert(result.msg);
}
)
}
});
后台controller层使用json进行接收
@ResponseBody
@RequestMapping(value = "deleteByIds",method = RequestMethod.POST)
public ResultTO deleteProduct(@RequestParam(value = "ids[]") Integer[] ids) {
ResultTO resultTO = null;
try {
resultTO = productService.deleteProduct(ids);
} catch (Exception e) {
e.printStackTrace();
return ResultTO.newFailResultTO("删除失败", null);
}
return resultTO;
}
//一定要使用这样的注解@RequestParam(value = "ids[]")不然会接收不到值
方法二
var ids = [];
$.each($(".check_id:checked"),function () {
ids.push($(this).val());
});
$.ajax({
type: 'post',
dataType: 'json',
url: 'deleteByIds',
data: {ids:ids},
traditional: true,
success: function (result) {
alert(result.msg);
},
error: function(data){
alert("操作异常");
}
});
后台controller层使用json进行接收
@ResponseBody
@RequestMapping(value = "deleteByIds",method = RequestMethod.POST)
public ResultTO deleteProduct(Integer[] ids) {
ResultTO resultTO = null;
try {
resultTO = productService.deleteProduct(ids);
} catch (Exception e) {
e.printStackTrace();
return ResultTO.newFailResultTO("删除失败", null);
}
return resultTO;
}
方法三
var ids = [];
$.each($(".check_id:checked"),function () {
ids.push($(this).val());
});
$.ajax({
type: 'post',
dataType: 'json',
url: 'deleteByIds',
data: JSON.stringify(ids),
contentType:"application/json",
success: function (result) {
alert(result.msg);
},
error: function(data){
alert("操作异常");
}
});
后台controller层使用json进行接收
@ResponseBody
@RequestMapping(value = "deleteByIds",method = RequestMethod.POST)
public ResultTO deleteProduct(@RequestBody List<Integer> ids) {
ResultTO resultTO = null;
try {
Integer[] idsa = ids.toArray(new Integer[0]);
resultTO = productService.deleteProduct(idsa);
} catch (Exception e) {
e.printStackTrace();
return ResultTO.newFailResultTO("删除失败", null);
}
return resultTO;
}
方法四
$("#btn_delete").click(function(){
var ids = $(".check_id:checked").map(function(){
return this.value;
}).get().join(",");
if(confirm("确定删除吗?")){
//使用ajax提交
$.post(
"deleteByIds",
{"ids":ids},
function(result){
alert(result.msg);
}
)
}
});
后台controller层使用json进行接收
@ResponseBody
@RequestMapping(value = "deleteByIds",method = RequestMethod.POST)
public ResultTO deleteProduct(Integer[] ids) {
ResultTO resultTO = null;
try {
resultTO = productService.deleteProduct(ids);
} catch (Exception e) {
e.printStackTrace();
return ResultTO.newFailResultTO("删除失败", null);
}
return resultTO;
}