SpringMVC ajax传值问题

SpringMVC ajax传值问题

 

 

AJAX前端请求数据处理

SpringMVC后台接受请求数据

SpringMVC对返回给前端数据处理

AJAX前端处理后台返回的数据

 

注意点：

1.ajax提交的参数说明

Datatype:

预期服务器返回的数据类型。如果不指定，jQuery将自动根据

HTTP包MIME信息来智能判断

"json": 返回 JSON 数据

"text": 返回纯文本字符串

ContentType:

默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。

Async:

默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。

Success:

请求成功后的回调函数。Function(a,b,c)有3个形参，a是返回的数据，b是”success”,c未知。形参的数目可以任意填写，按顺序加载实参

 

2.使用@ResponseBody注解的同时要导入

  jackson-core-asl-1.8.8.jar

  Jackson-mapper-asl-1.8.8.jar

该注解的功能才会生效

 

方式1：

ajax数据为url后缀的格式

 

注意：

这种方式，

提交方式使用POST时

contentType: "application/json; charset=utf-8",后台无法获取值

contentType:"application/x-www-form-urlencoded",后台可以获取值

当提交方式使用get时

两者都可以获取值

 

前台：

function ajaxTest1(){ 

     $.ajax({ 

     data:"name=小红&age=12", 

     type:"POST", 

     dataType: 'json', 

     url:"ajax/test1", 

     success:function(data){ 

        alert("success");

        alert(data.name);

        alert(data.age);

      },

     error:function(data){ 

         alert("fail"); 

     }

}); 

} 

 

后台：

@RequestMapping(value="ajax/test1") 

    public @ResponseBody Map<String,Object> login1(HttpServletRequest     request,HttpServletResponse response) throws IOException{ 

        System.out.println(request.getParameter("name")); 

        System.out.println(request.getParameter("age"));

        Map<String,Object> map = new HashMap<String,Object>(); 

        map.put("name",request.getParameter("name")); 

        map.put("age",request.getParameter("age"));

        return map; 

}

 

 

方式2：

Ajax数据为json格式

注意：

这种方式，

提交方式使用POST时

contentType: "application/json; charset=utf-8",后台无法获取值

contentType:"application/x-www-form-urlencoded",后台可以获取值。且中文不乱码

当提交方式使用get时

两者都可以获取值，但是中文乱码

 

前台：

 function ajaxTest2(){ 

  

        $.ajax({ 

        data:{"name":"小红","age":21},

        type:"POST", 

        dataType: 'json',

        url:"ajax/test2", 

        success:function(data){ 

          alert("success");

          alert(data.name);

          alert(data.age);

        },

         error:function(data){ 

            alert("fail"); 

        }

        }); 

    } 

 

后台：

    @RequestMapping(value="ajax/test2") 

    public @ResponseBody Map<String,Object> login2(HttpServletRequest     request,HttpServletResponse response) throws IOException{ 

        System.out.println(request.getParameter("name")); 

         System.out.println(request.getParameter("age"));

         Map<String,Object> map = new HashMap<String,Object>(); 

         map.put("name",request.getParameter("name")); 

         map.put("age",request.getParameter("age"));

         return map; 

} 

 

方式3：

Ajax数据为json转字符串

 

注意：

1.前台json数据的key必须和后台bean对应

所以以下清空会报错

var data = {"name":"小红","age":12,"sex":"女"};

var data = {"name":"小红","sex":"女"};

前台的json数据中key可以缺省

所以以下情况正确

var data = {"name":"小红"};

2.@RequestBody 不需要导入额外的jar包

3.contentType必须声明为"application/json;charset=utf-8",不然会报错

 

 

前台：

 function ajaxTest3(){ 

       var data = {"name":"小红","age":12};

       $.ajax({

         url: "ajax/test3",

         data: JSON.stringify(data),

         contentType: "application/json;charset=utf-8",

         type: "POST",

         success:function(data){ 

          alert("success");

          alert(data.name);

          alert(data.age);

        },

         error:function(data,b,c){ 

            alert("fail"); 

            alert(b);

        }

       });

  } 

 

 

后台：

@RequestMapping(value="ajax/test3") 

    public @ResponseBody Person  login3(@RequestBody  Person aa ) throws IOException{       

       System.out.println(aa);

        return aa;   

}

 

自定义一个Person类：

public class Person {

     private String name;

     private int age;

     public String getName() { return name;    }

     public void setName(String name) { this.name = name;    }

     public int getAge() { return age;    }

     public void setAge(int age) { this.age = age;    }

} 

 

方式4：

后台使用hashmap接受前段的值

 

方式5：

后台不使用@Respone自动转换json数据，而使用respone,write方法写入