SpringMVC与Ajax(Json,String,Form)数据交互

作者: 陈宇超　　　　　 　　　 纪念卓越班的日子

---

首先看一下我们数据交互的pojo类

public class User {    private String name;     private int age;     private boolean normal;     public User() {} //无参构造函数必须有    public User(String name, int age, boolean normal) {         this.name = name;         this.age = age;         this.normal = normal;     }     //省略get和set方法,toString方法}

---

Json格式的数据交互

1.　SpringMVC处理Json的需要的jar包

2.　用到的内置转换器 HttpMessageConverter

3.　前端jquery代码

var params = '{"name":"cyc","age":21,"normal":true}';//json格式的字符串,注意:这里必须是字符串$.ajax({    url: "${pageContext.request.contextPath}/json.action",    data: params,    type: "post",    contentType: "application/json;charset=utf-8",    dataType: "json",//返回的数据类型可以不写，默认接收所有,ajax会自动识别    success: function (data) {             alert(data.name + " - " + data.age + " - " + data.normal);    }});

4.　服务器端接收

   @RequestMapping(value = "/json.action", method = {RequestMethod.GET, RequestMethod.POST})    public @ResponseBody    User jsonData(@RequestBody User user) {        System.out.println(user);        User user1 = new User("小明", 33, false);        return user1;    }

---

Json数组格式的数据交互

1.　前端jquery代码

var params = '[{"name":"cyc","age":21,"normal":true},{"name":"ycy","age":22,"normal":true}]';//json格式的字符串,注意:这里必须是字符串$.ajax({    url: "${pageContext.request.contextPath}/json1.action",    data: params,    type: "post",    contentType: "application/json;charset=utf-8",    dataType: "json",//返回的数据类型可以不写，默认接收所有,ajax会自动识别    success: function (data) {        for (var i = 0; i < data.length; i++) {              alert(data[i].name + " - " + data[i].age + " - " + data[i].normal);        }    }});

2.　服务器端接收

   @RequestMapping(value = "/json1.action", method = {RequestMethod.GET, RequestMethod.POST})    public @ResponseBody    List<User> jsonData(@RequestBody List<User> list) {        System.out.println(list);        User user1 = new User("小明", 33, false);        User user2 = new User("小达", 23, true);        List<User> userList = new ArrayList<>();        userList.add(user1);        userList.add(user2);        return userList;    }

String字符串数据交互

1.　用到的内置转换器 HttpMessageConverter

2.　前端jquery代码

var params = '热爱中国';$.ajax({    url: "${pageContext.request.contextPath}/string.action",    data: params,    type: "post",    contentType: "text/plain;charset=utf-8",    dataType: "text",//返回的文本数据类型    success: function (data) {        alert(data);    }});

3.　服务器端接收

  @RequestMapping(value = "/string.action",produces="text/plain;charset=UTF-8")//这里的produces属性必写,可解决中文乱码    public @ResponseBody String stringData(@RequestBody String s) throws IOException {        System.out.println(s);        return "热爱中国共产党";    }

Form表单数据，直接同名变量接收

1.　用到的内置转换器 HttpMessageConverter

2.　前端jquery代码

var params = 'name=cyc&pwd=123';$.ajax({    url: "${pageContext.request.contextPath}/form.action",    data: params,    type: "post",    contentType: "application/x-www-form-urlencoded; charset=UTF-8",    dataType: "text",//返回的数据类型    success: function (data) {                 alert(data);             }    });

3.　服务器端接收

    @RequestMapping(value = "/form.action",produces="text/plain;charset=UTF-8")    public @ResponseBody String formData(String name,String pwd) throws IOException {        System.out.println(name+" - "+pwd);        return "喜欢旅游";    }

Form表单数据，pojo对象接收

1.　前端jquery代码

var params = 'name=cyc&age=321&normal=true';$.ajax({    url: "${pageContext.request.contextPath}/form.action",    data: params,    type: "post",    contentType: "application/x-www-form-urlencoded; charset=UTF-8",    dataType: "text",//返回的数据类型    success: function (data) {                 alert(data);             }    });

2.　服务器端接收

    @RequestMapping(value = "/form2.action",produces="text/plain;charset=UTF-8")    public @ResponseBody String form2Data(User user) throws IOException {        System.out.println(user);        return "热爱生命";    }

动动小手点个赞吧！！！传播知识，分享快乐