前端用AJAX把数组传给后端控制器数组参数的方法

最新推荐文章于 2024-07-07 10:25:24 发布

iw1210

最新推荐文章于 2024-07-07 10:25:24 发布

阅读量3.6k

点赞数 2

分类专栏： Web开发 JSP JavaScript Java 数据库网络编程编程软件设计

本文链接：https://blog.youkuaiyun.com/iw1210/article/details/79717868

版权

编程同时被 3 个专栏收录

74 篇文章

订阅专栏

网络编程

45 篇文章

订阅专栏

数据库

35 篇文章

订阅专栏

本文介绍了如何使用AJAX在前端将数组数据发送到后端控制器。分别展示了数组元素为基本类型和类对象两种情况的实现方式，提供了对应的控制器代码和前端JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端用AJAX把数组传给后端控制器数组参数的方法

分两种情况：
1. 数组元素是基本类型数据的数组。
2. 数组元素是普通类对象的数组。

下面分别讲解。

一、数组元素是基本类型数据的数组
这种情况比较简单，下面是示例代码。

控制器代码：

@Controller
@RequestMapping(value = "testctrl")
 @ResponseBody
 @RequestMapping(value = "testfun", method = RequestMethod.POST)
        public void testFun(@RequestParam(value="arrint[]") int[] arrint){    // 用 Integer 类型也可以。
        return;
    }
}

前端JS代码：

<script type="text/javascript">

    $(function(){
        alert("here is test.");
        test();
    });


    function test()
    {
        var arr = [1,3,5];

        $.ajax({
            url: "/test/testctrl/testfun",
            type: 'POST',
            async: true,
            data: {"arrint[]":arr},
            dataType:'JSON',
            success:function(data){
				// ...
            }
        });
    }

</script>

二、数组元素是普通类对象的数组

这种情况比较复制，要多写点代码，如下。

定义一个类：

public class TestXfer {
    private Integer testid;
    private String teststr;

    public Integer getTestid() {
        return testid;
    }

    public void setTestid(Integer testid) {
        this.testid = testid;
    }

    public String getTeststr() {
        return teststr;
    }

    public void setTeststr(String teststr) {
        this.teststr = teststr;
    }
}

控制器代码：

@Controller
@RequestMapping(value = "testctrl")
public class TestController {
	@ResponseBody
	@RequestMapping(value = "testfun", method = RequestMethod.POST)
	   public void testFun(String testxfers){
		Object val;
		JSONArray jsnarr = JSONArray.fromObject(testxfers);
		TestXfer[]  arrTestxfer = new TestXfer[jsnarr.size()];
		for(int i=0; i<jsnarr.size(); i++){
			arrTestxfer[i] = new TestXfer();
			JSONObject jsnobj = jsnarr.getJSONObject(i);
			if(null != (val = jsnobj.get("testid")))
				arrTestxfer[i].setTestid((Integer) val);
			if(null != (val = jsnobj.get("teststr")))
				arrTestxfer[i].setTeststr(val.toString());
		}
		return：
	}
}

前端JS代码：

<script type="text/javascript">

    $(function(){
        alert("here is test.");
        test();
    });

    function test()
    {
        var arr=
            [
               // { testid:1,  teststr:'str1' },
                { testid:1 },
               // { testid:2,  teststr:'str2' },
                { teststr:'str2' },
                { testid:3,  teststr:'str3' }
            ];

        $.ajax({
            url: "/test/testctrl/testfun",
            type: 'POST',
            async: true,
            data: {testxfers:JSON.stringify(arr)},
            dataType:'JSON',
            success:function(data){
				// ...
            }
        });
    }

</script>

Ok，完毕！