springmvc 接收前端页面ajax数组/对象等复杂对象参数的多种方式汇总（全）

<html>
<body>
<h2>测试接收前端各种参数</h2>


    测试接收前端各种参数
    <div><button onclick="fun1()">测试1</button></div>

    <div><button onclick="fun2()">测试2</button></div>

    <div><button onclick="fun3()">测试3</button></div>

    <div><button onclick="fun4()">测试4-复杂对象</button></div>

<div><button onclick="fun5()">测试5复杂对象</button></div>

<div><button onclick="fun6()">测试6-简单数组(List|String[])</button></div>

<div><button onclick="fun7()">测试7-简单数组(List|String[])</button></div>





</body>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">

    console.log("发送");
    function fun1(){
        $.ajax({
            url:"test1/2",
            // data:{},
            dataType:"json",
            //contentType:"application/json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }


    console.log("2");

    function fun2(){
        $.ajax({
            url:"test2",
            data:{id:2,name:"xiaoming"},
            dataType:"json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }


    function fun3(){
        $.ajax({
            url:"test3",
            data:{id:2,name:"xiaoming"},
            dataType:"json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }

    function fun4(){
        $.ajax({
            url:"test4",
            type:"post",
            data:JSON.stringify({users:[{id:2,name:"xiaoming"},{id:3,name:"zhagnjie"}]}),
            dataType:"json",
            contentType:"application/json",
            success:function (res) {
                alert("成功...res:"+res);
            },
            error: function() {

                alert("错误...");
            }
        });
    }

    function fun5(){

        var data = [];
        data.push({id:2,name:"xiaoming"});
        data.push({id:3,name:"zhagnjie"});
        console.log(JSON.stringify(data));
        $.ajax({
            url:"test5",
            type:"post",
            data:JSON.stringify(data),
            // data:[{id:2,name:"xiaoming"},{id:3,name:"zhagnjie"}],
            dataType:"json",
            contentType:"application/json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }

    function fun6(){
        $.ajax({
            url:"test6",
            type:"post", //注意此处一定要用post发送
            data:JSON.stringify(["3","1"]),
            dataType:"json",
            contentType:"application/json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }

    function fun7(){
        $.ajax({
            url:"test7",
            // type:"post",//post与get均可
            data:{ids:["3","1"]},
            dataType:"json",
            success:function (res) {
                alert("成功...res:"+res);

            },
            error: function() {

                alert("错误...");
            }
        });
    }
</script>
</html>

package org.test.param;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.test.param.vo.RequestBean;
import org.test.param.vo.User;

import java.util.List;

/**
 * 测试springmvc接收前端的各种参数方式
 */
@Controller
@RequestMapping("/param")
public class ParameterController {

    private Logger logger = LoggerFactory.getLogger(ParameterController.class);

    @RequestMapping("/index")
    public String index(){
        return "param/index";
    }

    @RequestMapping("/test1/{type}")
    @ResponseBody
    public Object test1(@PathVariable("type") String type){
        System.out.println("接收参数：type:"+type);
        return !StringUtils.isEmpty(type);
    }

    @RequestMapping("/test2")
    @ResponseBody
    public Object test2(Integer id,String name){
        logger.info("接收参数：id:{},name:{}",id,name);
        return !StringUtils.isEmpty(name);
    }

    @RequestMapping("/test3")
    @ResponseBody
    public Object test3(User user){
        logger.info("接收参数：user:{}",user);
        return !StringUtils.isEmpty(user);
    }



    @RequestMapping("/test4")
    @ResponseBody
    public Object test4(@RequestBody RequestBean users){
        logger.info("接收参数：user.size:{}",users.getUsers().size());
        return users.getUsers().size();
    }

    @RequestMapping("/test5")
    @ResponseBody
    public Object test5(@RequestBody List<User> users){
        logger.info("接收参数：user:{}",users.size());
        return users.size();
    }

    @RequestMapping("/test6")
    @ResponseBody
    public Object test6(@RequestBody List<String> ids){
        logger.info("接收参数：ids:{}",ids);
        return !StringUtils.isEmpty(ids);
    }


    /**
     * 接收参数也可以是String[] ids
     * @param ids
     * @return
     */
    @RequestMapping("/test7")
    @ResponseBody
    public Object test7(@RequestParam("ids[]") List<String> ids){
        logger.info("接收参数：ids:{}",ids);
        return !StringUtils.isEmpty(ids);
    }
}

springmvc 接收前端页面ajax数组/对象等复杂对象参数的多种方式汇总（全）

猜你喜欢