JavaScript:ajax传递List数组到后台

x33g5p2x  于2021-12-30 转载在 JavaScript  
字(1.6k)|赞(0)|评价(0)|浏览(373)

ajax传递List数组到后台

1.前端实现

var _list = [];
$("input[name='dicName']").each(function(i,item){
     _list.push(item.value);
    console.log(i+"数组:"+item.id+':'+item.value);
});

$.ajax({
    url: '/system/dic/save',
    data: {"list":_list},
    type: 'post',
    dataType : "json",
    success: function (data) {
        if (data.result) {
            alert("保存成功!");
        }else {
            alert("保存失败!");
        }
    },
});

完整代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ajax传递List数组到后台</title>
<script src="jquery-1.7.min.js"></script>
</head>
<body>
<div class="content">
<div id="img1">
<input  type="input" name="dicName" value="红色"/>
</div>

<div id="img2">
<input  type="input" name="dicName" value="黑色"/>
</div>

<div id="img3">
<input  type="input" name="dicName" value="白色"/>
</div>

</div>
<script type="text/javascript">
var _list = [];
$("input[name='dicName']").each(function(i,item){
	 _list.push(item.value);
    console.log(i+"数组:"+item.id+':'+item.value);
});

$.ajax({
	url: '/system/dic/save',
	data: {"list":_list},
	type: 'post',
	dataType : "json",
	success: function (data) {
		if (data.result) {
			alert("保存成功!");
		}else {
			alert("保存失败!");
		}
	},
});

</script>
</body>
</html>

2.后端实现

@RequestMapping(value = "/save",method = {RequestMethod.POST})
    public void saveedit2(HttpServletRequest request, @RequestParam("list[]") List<String> list) {
        ……

    }

相关文章