SpringMvc学习笔记(五)客户端数据传递的专题(前台传数据到后台)

简单的数据类型获取,数组的获取方式,对象专题,占位符传递简单数据,前台传来JSON格式字符串处理,两个对象和关联对象,不同对象的同属性解决方案,Map的写法(一般分页查询),List的获取(一般批量添加),json传给前台的解决方案,JavaScript对象和JSON格式字符串互转,java对象(自定义对象,集合)和JSON格式字符串互转,Ajax传递JSON,@RequestBody作用

源码获取github

1.项目结构

2.简单数据类型获取

java web阶段获取方式

demo01.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<h2>JAVA WEB阶段 服务端如何获取客户端的数据</h2>
<form action="client01" method="get">
   <input type="text" name="user_name"><br>
   <input type="checkbox" name="hobby" value="basketball">篮球
   <input type="checkbox" name="hobby" value="football">足球
   <input type="checkbox" name="hobby" value="book">看书
   <br>
   <button>传统模式</button>

</form>

</body>
</html>

SimpleTypeDemoController.java

/**
 * javaweb形式获取
 *
 * @return
 */
@RequestMapping("/client01")
public ModelAndView test01(HttpServletRequest request) {
   String user_name = request.getParameter("user_name");
   String[] hobby = request.getParameterValues("hobby");
   System.out.println("姓名" + user_name);
   for (String s : hobby) {
      System.out.print(s + "--");
   }
   return null;
}

@RequestParam获取数据

demo02.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<h2>@RequestParam获取数据</h2>
<form action="client02" method="get">
   <%--<input type="text" name="user_name"><br>--%>
   <input type="number" name="user_id">
   <button>提交数据</button>

</form>

</body>
</html>

获取数据写法,可以自动完成类型转换,name和value属性是等价的

SimpleTypeDemoController.java

/**
 * 通过@RequestParam注解获取数据,注解还自动转换类型,value和name一样
 * required是否必须要接受到这个值,默认true
 * defaultValue默认设置,如果没有接收到值,则默认设置值
 *
 * @param request
 * @return
 */
@RequestMapping("/client02")
public ModelAndView test02(@RequestParam(value = "user_name", required = false) String name,
                           @RequestParam(name = "user_id", required = false, defaultValue = "1111") Integer id) {
   System.out.println("姓名" + name);
   System.out.println("ID" + id);
   return null;
}

@RequestParam获取数据简写方式

只要传递的名称和形参的名称两者保持一致即可,并且默认情况下required=false

demo03.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<h2>简写方式</h2>
<form action="client03" method="get">
   <input type="text" name="user_name"><br>
   <input type="number" name="user_id"><br>
   <br>
   <button>提交数据</button>

</form>

</body>
</html>

SimpleTypeDemoController.java

扫描二维码关注公众号,回复: 10210367 查看本文章
/**
 * 简写方式,传递的名称和接收的形参名字一样就可以,required默认为false
 * @param name
 * @param id
 * @return
 */
@RequestMapping("/client03")
public ModelAndView test03(String user_name,Integer user_id) {
   System.out.println("姓名" + user_name);
   System.out.println("ID" + user_id);
   return null;
}

3.传递数组专题

超链接传递数组、复选框传递数组、文本框传递数组、多选列表

demo04.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<h2>超链接传递数组</h2>
<a href="client04?role_id=100&role_id=200&role_id=300">传递数组</a>
<h2>复选框传递数组</h2>
<form action="client05">
   <input type="checkbox" name="hobby" value="basketball">篮球
   <input type="checkbox" name="hobby" value="football">足球
   <input type="checkbox" name="hobby" value="book">看书
   <button>简写方式</button>
</form>
<h2>文本框传递数组</h2>
<form action="client06">
   <input type="text" name="hobby">
   <input type="text" name="hobby">
   <button>简写方式</button>
</form>
<h2>多选列表</h2>
<form action="client07">
   <select name="hobby" multiple="multiple">
      <option value="music">音乐</option>
      <option value="book">看书</option>
      <option value="football">足球</option>
   </select>
   <button>简写方式</button>
</form>
</body>
</html>

ArrayTypeDemoController.java

package com.hs.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

import java.util.Arrays;

/**
 * 数组的获取方式
 */
@Controller
public class ArrayTypeDemoController {
   /**
    * 超链接获取数组
    *
    * @return
    */
   @GetMapping("/client04")
   public ModelAndView test01(@RequestParam(name = "role_id") Integer[] roles) {
      System.out.println(Arrays.asList(roles));
      return null;
   }

   /**
    * 复选框传递数组
    *
    * @param roles
    * @return
    */
   @GetMapping("/client05")
   public ModelAndView test02(String[] hobby) {
      if (hobby != null) {
         System.out.println(Arrays.asList(hobby));
      } else {
         System.out.println("您没有爱好!");
      }

      return null;
   }

   /**
    * 文本框传递数据
    *
    * @param hobby
    * @return
    */
   @GetMapping("/client06")
   public ModelAndView test03(String[] hobby) {
      System.out.println(Arrays.asList(hobby));
      return null;
   }

   /**
    * 多选列表传递数组
    *
    * @param hobby
    * @return
    */
   @GetMapping("/client07")
   public ModelAndView test04(String[] hobby) {
      if (hobby != null) {
         System.out.println(Arrays.asList(hobby));
      } else {
         System.out.println("您没有爱好!!");
      }
      return null;
   }
}

4.对象专题

User.java

package com.hs.model;

public class User {

   private Integer user_id;
   private String user_name;
   private String sex;
   private Role role;

   public String getSex() {
      return sex;
   }

   public void setSex(String sex) {
      this.sex = sex;
   }

   public Integer getUser_id() {
      return user_id;
   }

   public void setUser_id(Integer user_id) {
      this.user_id = user_id;
   }

   public String getUser_name() {
      return user_name;
   }

   public void setUser_name(String user_name) {
      this.user_name = user_name;
   }

   public Role getRole() {
      return role;
   }

   public void setRole(Role role) {
      this.role = role;
   }

   @Override
   public String toString() {
      return "User{" +
            "user_id=" + user_id +
            ", user_name='" + user_name + '\'' +
            ", sex='" + sex + '\'' +
            ", role=" + role +
            '}';
   }
}

Role.java

package com.hs.model;

public class Role {
   private String role_name;

   public String getRole_name() {
      return role_name;
   }

   public void setRole_name(String role_name) {
      this.role_name = role_name;
   }

   @Override
   public String toString() {
      return "Role{" +
            "role_name='" + role_name + '\'' +
            '}';
   }

}

Student.java

package com.hs.model;

public class Student {

   private Integer user_id;
   private String user_name;
   private String sex;

   public Integer getUser_id() {
      return user_id;
   }

   public void setUser_id(Integer user_id) {
      this.user_id = user_id;
   }

   public String getUser_name() {
      return user_name;
   }

   public void setUser_name(String user_name) {
      this.user_name = user_name;
   }

   public String getSex() {
      return sex;
   }

   public void setSex(String sex) {
      this.sex = sex;
   }

   @Override
   public String toString() {
      return "Student{" +
            "user_id=" + user_id +
            ", user_name='" + user_name + '\'' +
            ", sex='" + sex + '\'' +
            '}';
   }
}

简单对象属性名和传递名称一致

传递的名称和类中属性保持一致即可,如果传递的数据类型转换失败会报400错误

页面内容都是在demo05.jsp,java代码都在ModelTypeDemoController.java

demo05.jsp

<h2>简单对象数据传递:传递的名称(name)为类中的属性名字一样即可</h2>
<form action="client08">
   姓名:<input type="text" name="user_name">
   性别:<input type="text" name="sex">
   <button>提交数据</button>
</form>

ModelTypeDemoController.java

/**
 * 简单对象传递
 *
 * @return
 */
@GetMapping("/client08")
public ModelAndView test01(User user, String user_name, String sex) {
   System.out.println(user);
   System.out.println("-----依然可以使用简单方式----");
   System.out.println(user_name);
   System.out.println(sex);
   return null;
}

多个对象

一个表单有两个对象[对象中的属性名称不一致

<h2>多个对象</h2>
<form action="client09">
   姓名:<input type="text" name="user_name">
   性别:<input type="text" name="sex">
   角色名称:<input type="text" name="role_name">
   <button>提交数据</button>
</form>
/**
 * 多个对象传递
 *
 * @param user
 * @param role
 * @return
 */
@GetMapping("/client09")
public ModelAndView test02(User user, Role role) {
   System.out.println(user);
   System.out.println("-----角色----");
   System.out.println(role);
   return null;
}

关联对象

方式一:后台处理
<h2>多个对象进行关联方式一:后台处理</h2>
<form action="client10">
   姓名:<input type="text" name="user_name">
   性别:<input type="text" name="sex">
   角色名称:<input type="text" name="role_name">
   <button>提交数据</button>
</form>
/**
 * 关联对象_方式一:后台处理
 *
 * @param user
 * @param role
 * @return
 */
@GetMapping("/client10")
public ModelAndView test03(User user, Role role) {
   //设置关联关系
   user.setRole(role);
   System.out.println(user);
   return null;
}
方式二:前台处理(重点掌握)
<h2>多个对象进行关联方式二:前台处理</h2>
<form action="client11">
   姓名:<input type="text" name="user_name">
   性别:<input type="text" name="sex">
   角色名称:<input type="text" name="role.role_name"><%--name=类中.属性--%>
   <button>提交数据</button>
</form>
/**
 * 关联对象_方式二:前台处理
 *
 * @param user
 * @return
 */
@GetMapping("/client11")
public ModelAndView test04(User user) {
   System.out.println(user);
   return null;
}

不同对象同属性传递借助第三方类

<h2>不同对象同属性传递借助第三方类</h2>
<form action="client12">
   <h3>用户</h3>
   姓名:<input type="text" name="user.user_name">
   性别:<input type="text" name="user.sex">
   角色信息:<input type="text" name="user.role.role_name">
   <h3>学生</h3>
   姓名:<input type="text" name="student.user_name">
   性别:<input type="text" name="student.sex">
   <button>提交数据</button>
</form>
/**
 * 不同对象,同属性问题,借助第三方类解决问题
 *
 * @return
 */
@GetMapping("/client12")
public ModelAndView test05(HsModel hsModel) {
   System.out.println(hsModel.getStudent());
   System.out.println(hsModel.getUser());
   return null;
}

第三方类HsModel.java

package com.hs.model;

import java.util.List;
import java.util.Map;

public class HsModel {

    private User user;
    private Student student;
    private Map<String,Object> query;
    private List<Student> studentList;

    public User getUser() {
        return user;
    }

    public void setUser(User user) {
        this.user = user;
    }

    public Student getStudent() {
        return student;
    }

    public void setStudent(Student student) {
        this.student = student;
    }

    public Map<String, Object> getQuery() {
        return query;
    }

    public void setQuery(Map<String, Object> query) {
        this.query = query;
    }

    public List<Student> getStudentList() {
        return studentList;
    }

    public void setStudentList(List<Student> studentList) {
        this.studentList = studentList;
    }

    @Override
    public String toString() {
        return "HsModel{" +
                "user=" + user +
                ", student=" + student +
                ", query=" + query +
                ", studentList=" + studentList +
                '}';
    }
}

5.Map的写法

demo05.jsp

<h2>如果是Map属性也是借助第三方类</h2>
<form action="client13">
   姓名:<input type="text" name="query['user_name']"<%--属性['需要设置的key值']--%>>
   性别:<input type="text" name="query['sex']">
   <button>提交数据</button>
</form>

MapTypeDemoController.java

package com.hs.web;

import com.hs.model.HsModel;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * Map_分页保存查询
 */
@Controller
public class MapTypeDemoController {

   /**
    * map接收数据,通过第三方类
    * @param hsModel
    * @return
    */
   @GetMapping("/client13")
   public ModelAndView test01(HsModel hsModel) {
      System.out.println(hsModel.getQuery());
      return null;
   }
}

6.List的写法

demo05.jsp

<h2>传递List也是借助第三方类</h2>
<form action="client14">
   姓名:<input type="text" name="studentList[0].user_name"> <%--设置第1条数据的user_name--%>
   性别:<input type="text" name="studentList[0].sex"><%--设置第1条数据的sex--%>
   <hr/>
   姓名:<input type="text" name="studentList[1].user_name"> <%--设置第2条数据的user_name--%>
   性别:<input type="text" name="studentList[1].sex">
   <hr/>
   姓名:<input type="text" name="studentList[5].user_name"> <%--设置第6条数据的user_name,同时也设置了这个list长度是6--%>
   性别:<input type="text" name="studentList[5].sex">
   <button>提交数据</button>
</form>

studentList[1].user_name 类中属性 [ 索引 ]. 属性名

ListTypeDemoController.java

package com.hs.web;

import com.hs.model.HsModel;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.servlet.ModelAndView;

/**
 * List数据_一般做批量添加
 */
@Controller
public class ListTypeDemoController {
   @GetMapping("/client14")
   public ModelAndView test01(HsModel hsModel) {
      System.out.println(hsModel.getStudentList());
      return null;
   }
}

7.占位符传递数据

demo05.jsp

<h2>占位符传递数据</h2>
<a href="client15/11110/tomcat?sex=man">占位符传递数据</a>
<h2>占位符传递数据——可以直接使用Map来接收数据</h2>
<a href="client16/123/tomcat?sex=man">使用Map接收数据</a>

PlaceholderTypeDemoController.java

package com.hs.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.servlet.ModelAndView;

import java.util.Map;

/**
 * 占位符传递简单数据
 */
@Controller
public class PlaceholderTypeDemoController {
   @GetMapping("/client15/{id}/{name}")
   public ModelAndView test01(
         @PathVariable("id") int user_id,/*占位符的名字和形参不一样,在PathVariable中需要写占位符的名字*/
         @PathVariable String name,/*一样则可以省略*/
         String sex  /*@RequestParam的简写方式*/
   ) {
      System.out.println(user_id);
      System.out.println(name);
      System.out.println(sex);
      return null;
   }
   @GetMapping("/client16/{id}/{name}")
   public ModelAndView test01(
         @PathVariable Map<String,Object> map,/*占位符的名字作为key值*/
         String sex  /*@RequestParam的简写方式*/
   ) {
      System.out.println(map);
      System.out.println(sex);
      return null;
   }
}

8.JavaScript对象和JSON互转

需要Jackson的三个jar包:jackson-annotations-2.8.1.jar,jackson-core-2.8.1.jar,jackson-databind-2.8.1.jar

demo06.jsp(在浏览器F12,看console输出)

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<script type="text/javascript">
   //给对象赋值的几种方 式
    var obj = {
        user_name: "悟空",
        sex: "男",
        hobby: ["basktball", "football"],
        classInfo: {
            class_name: "计算机",
           number:8
        }
    };
    obj.nickname = "齐天大圣";
    obj["age"] = 500;

    console.log(obj);

    //1.将JavaScript对象转换为JSON格式的字符串
    var jsonStr = JSON.stringify(obj);
    console.log(jsonStr);
    //2.将JSON格式的字符串转换为JavaScript对象
    var hs = JSON.parse(jsonStr);
    console.log(hs);
</script>

</body>
</html>

9.java对象和json互转

JSON2JavaTest.java

package com.hs.test;

import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.hs.model.Role;
import com.hs.model.User;
import org.junit.Test;

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


public class JSON2JavaTest {

   /**
    * Java对象和JSON字符串的互相转换
    */
   @Test
   public void test01() throws IOException {
      Map<String,Object> map = new HashMap<>();
      map.put("user_name","悟空");
      map.put("age", 500);
      map.put("hobby",/*静态初始化数据*/ new String[]{"music","book"});
      System.out.println("转换之前的Map:"+map);

      //1.java对象转JSON格式的字符串
      ObjectMapper objectMapper = new ObjectMapper();
      String jsonString = objectMapper.writeValueAsString(map);
      System.out.println("java对象转JSON格式的字符串:"+jsonString);

      //2.JSON字符串转换为java对象
      Map<String, Object> hsMap = objectMapper.readValue(jsonString, Map.class);
      System.out.println("JSON字符串转换为java对象:"+hsMap);
   }

   /**
    * java对象转json字符串__自定义对象互相转换
    * @throws Exception
    */
   @Test
   public void test02() throws Exception {
      User user = new User();
      user.setUser_id(100);
      user.setUser_name("八戒");
      user.setSex("男");

      Role role = new Role();
      role.setRole_name("超级管理员");
      //建立联系
      user.setRole(role);
      System.out.println("转换之前的User:"+user);

      //1.java对象转json字符串
      ObjectMapper objectMapper = new ObjectMapper();
      String jsonString = objectMapper.writeValueAsString(user);
      System.out.println("java对象转json字符串:"+jsonString);

      //2.json字符串转java对象
      User hsUser = objectMapper.readValue(jsonString, User.class);
      System.out.println("json字符串转java对象:"+hsUser);
   }
   /**
    * java对象转json字符串__集合
    * @throws Exception
    */
   @Test
   public void test03() throws Exception {
      List<User> userList = new ArrayList<>();
      User user = new User();
      user.setUser_id(100);
      user.setUser_name("八戒");
      user.setSex("男");
      Role role = new Role();
      role.setRole_name("超级管理员");
      user.setRole(role);
      userList.add(user);

      user = new User();
      user.setUser_id(100);
      user.setUser_name("悟空");
      user.setSex("男");
      role = new Role();
      role.setRole_name("管理员");
      user.setRole(role);
      userList.add(user);

      System.out.println("转换之前的List<User>:"+userList);

      //1.java对象转json字符串
      ObjectMapper objectMapper = new ObjectMapper();
      String jsonString = objectMapper.writeValueAsString(userList);
      System.out.println("java对象转json字符串:"+jsonString);

      //2.json字符串转java对象
      System.out.println("组成的List<Map>:"+objectMapper.readValue(jsonString, List.class)); //组成的是List<Map>
      JavaType t = objectMapper.getTypeFactory().constructParametricType(List.class, User.class);
      List<User> tempList = objectMapper.readValue(jsonString, t);
      System.out.println("json字符串转java对象:"+tempList);
   }

}

10.前台传给后台json,然后返回给前台json

demo07.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<script type="text/javascript" src="resource/jquery.js"></script>
<script type="text/javascript">
   $(function () {
      var obj = {
          user_id:888,
         user_name:"悟空",
         sex:"男",
         role:{
              role_name:"超级管理员"
         }
      };
      //1.JavaScript对象转换json格式字符串
        var jsonStr = JSON.stringify(obj);
        //2.将该字符串传递到controller
      /*$.get("json01",{hs:jsonStr},function (data) {
          //date是后台返回了一个JSON格式的字符串
          alert(data);    //alert(data)弹出这个字符串全部,下面那个是把json对象转换为JavaScript字符串好取值
        })*/
      $.get("json01",{hs:jsonStr},function (data) {
          //data转换一、或者加"json"
          // alert(JSON.parse(data);
            alert(data);
            //取这个JavaScript字符串的某个值
            alert(data.role.role_name);
        },"json")
    });
</script>
</body>
</html>

JSONTypeDemoController.java

public class JSONTypeDemoController {
   /**
    * 整个流程是,前台JavaScript转换json,把json传给后台,后台再转换为java对象,进行修改等操作,
    * 然后这个对象再通过注解@ResponseBody转换为前台data接收到的JSON格式的字符串
    * @param hs
    * @return
    * @throws IOException
    */
   @GetMapping("json01")
   @ResponseBody
   public User json01(String hs) throws IOException {

      System.out.println(hs);
      //将前台传过来的json格式对象转换为java对象
      ObjectMapper objectMapper = new ObjectMapper();
      User user = objectMapper.readValue(hs, User.class);
      user.setSex("女");

      return user;
   }

如何只是单纯的写了上面代码,运行,会发现alert,不会出现数据,这是一个bug问题,需要解决,往前台传入json的,都需要配置这个,在springmvc.xml中加入

<!--1.启动SpringMVC注解-->
<mvc:annotation-driven>

        <mvc:message-converters register-defaults="true">
            <!--解决下载的时候转换问题-->
            <bean class="org.springframework.http.converter.ByteArrayHttpMessageConverter"/>

            <!--解决@ResponseBody在IE浏览器的BUG问题-->
            <bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
                <property name="prettyPrint" value="true"/>
                <property name="supportedMediaTypes">
                    <list>
                        <value>text/html;charset=UTF-8</value>
                        <value>text/plan;charset=UTF-8</value>
                        <value>application/json;charset=UTF-8</value>
                    </list>
                </property>


            </bean>
        </mvc:message-converters>

11.Ajax传递JSON和@RequestBody的作用(强烈推荐使用这种)

demo08.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>Title</title>
</head>
<body>
<script type="text/javascript" src="resource/jquery.js"></script>
<script type="text/javascript">
   $(function () {
      var obj = {
          user_id:888,
         user_name:"悟空",
         sex:"男",
         role:{
              role_name:"超级管理员"
         }
      };
      //1.JavaScript对象转换json格式字符串
        var jsonStr = JSON.stringify(obj);
        //2.使用原生的方式
      $.ajax({
         type:"POST",//必须为POST请求,如果你要传递JSON字符串
         url:"json02",
         data:jsonStr,
         dataType:"json",    //解析返回来的data数据的类型
         contentType: "application/json;charset=UTF-8",
         processData:false,
         success:function (data) {
                alert(data);
            }

      });

    });
</script>
</body>
</html>

JSONTypeDemoController.java

/**
 * 通过ajax传递过来数据,@RequestBody相当于完成了上面的
 * ObjectMapper objectMapper = new ObjectMapper();
 *        User user = objectMapper.readValue(hs, User.class);
 *     这两步,但是前提是传过来的字段名和user类的属性名一样,才能正常转换
 * @param user
 * @return
 */
@PostMapping("/json02")
@ResponseBody
public User json02(@RequestBody User user) {
   user.setUser_name("八戒");
   return user;
}
发布了44 篇原创文章 · 获赞 31 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/qq_39707130/article/details/81907010