JavaScript:ajax传递List数组到后台

Posted 秋9

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript:ajax传递List数组到后台相关的知识,希望对你有一定的参考价值。

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) 
        ……

    

以上是关于JavaScript:ajax传递List数组到后台的主要内容,如果未能解决你的问题,请参考以下文章

JqueryAjax如何传递JSON数据到controller,其中包括List数据?

AJAX 传递jison数组 ;前端循环辅助数组 -----解决方案

springMVC通过ajax传递参数list对象或传递数组对象到后台

58. Django 2.1.7 ajax数组传递和后台接收

[WebApi]Ajax传递数组到API

将ajax数据传递给后端javascript