jquery ajax向spring mvc controller中传值并接受及解析返回值

Posted 2022-11-09 Walter_lee2008

首先要导入Jackson的Jar包、依赖，用于控制器数据转换。

    <!-- Jackson Json处理工具包 -->
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>2.4.2</version>
    </dependency>

1.controller中参数是几个单独的基本类型参数,不是对象或者引用类型的

spring MVC-controller java后端--如下3种写法是一致的效果。

    @RequestMapping(value="/testJson1")   
    @ResponseBody//此注解不能省略 否则ajax无法接受返回值 
    public  Map<String,Object> testJson1( String name,String password,String age) 
    	Map<String, Object> result = null;  
        // 打印接收的JSON格式数据
        System.out.println("pname=" + name + ",password="
                + password + ",page=" + age);       
        // 返回JSON格式的响应
        result = new HashMap<String, Object>();  
        result.put("msg", "name="+name);  
        return result;  //返回对象集合，通用写法，既可以返回字符串也可以返回对象集合
    
    
    @RequestMapping(value="/testJson2",method=RequestMethod.POST)   
    @ResponseBody//此注解不能省略 否则ajax无法接受返回值(省略这句话返回的是视图jsp页面) 
    public  String testJson2( String name,String password,String age) 
    	Map<String, Object> result = null;  
        // 打印接收的JSON格式数据
        System.out.println("pname=" + name + ",password="
                + password + ",page=" + age);       
        // 返回JSON格式的响应
        result = new HashMap<String, Object>();  
        result.put("msg", "name="+name);  
        return "sssss"+name;  //返回字符串
    

    @RequestMapping(value="/testJson")
    @ResponseBody
    public  User testJson(User user) 
        // 打印接收的JSON格式数据
        System.out.println("pname=" + user.getName() + ",password="
                + user.getPassword() + ",page" + user.getAge());       
        // 返回JSON格式的响应
        return user;
    

jQuery  ajax 前端

    function testJson2() 
        //获取输入的值pname为id
        alert($("#name").val());
        var name = $("#name").val();
        var password = $("#password").val();
        var age = $("#age").val();
        var user= name : name,password : password,age : age;
        $.ajax(
            //请求路径
            url : "$pageContext.request.contextPath /testJson1.do",
            //请求类型	
            type : "post",
            //data表示发送的数据
            data:user, 
            /*dataType : "json", */ //代表返回的数据类型。这句话不需要，只有在get请求的情况并且返回的是json(如果返回字符串也可以不用写)的情况才用，其他情况可以不写。
            //成功响应的结果
            success : function(data) 
            	console.log(data);
            
        );
    

 

2.controller中参数结构带有复杂类型，如嵌套类型，数组，list集合。

spring MVC-controller java后端

    @RequestMapping(value="/testJson3")
    @ResponseBody
    public  Map<String,Object> testJson3(@RequestBody  User user) 
    	Map<String, Object> result = null;  
        // 打印接收的JSON格式数据
    	System.out.println("pname=" + user.getName() + ",password="
                + user.getPassword() + ",page" + user.getAge()+ ",aihao" + user.getAihao());      
        // 返回JSON格式的响应
        result = new HashMap<String, Object>();  
        result.put("msg", "name="+user.getName());  
        return result;  //返回对象集合，通用写法，既可以返回字符串也可以返回对象集合
    

jQuery  ajax 前端

 function testJson() 
        //获取输入的值pname为id
        alert($("#name").val());
        var name = $("#name").val();
        var password = $("#password").val();
        var age = $("#age").val();
        var user= name : name,password : password,age : age,aihao:[1,2,3];
        $.ajax(
            //请求路径
            url : "$pageContext.request.contextPath /testJson3.do",
            //请求类型	
            type : "post",
            //data表示发送的数据
            data : JSON.stringify(user),  
            /* data:user, */
            contentType: 'application/json;charset=UTF-8',  
            /*dataType : "json", */ //代表返回的数据类型。这句话不需要，只有在get请求的情况并且返回的是json(如果返回字符串也可以不用写)的情况才用，其他情况可以不写。
            //成功响应的结果
            success : function(data) 
            	console.log(data);				
            
        );
    

这里面差别是：

            data : JSON.stringify(user),  //json序列化
            contentType: 'application/json;charset=UTF-8',  

            JAVA User 对象包含的属性有数组 [aihao]。