jQuery封装数组或集合使用Ajax提交

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