1、表单的作用:
- 收集 用户填入的 数据,并将这些数据 提交给服务器
- 表单的语法
<form action="服务器地址" method="请求方式" enctype="数据格式"> <!-- 表单项 --> <input type="submit" value="提交按钮"> </form>
method 请求方式有
- get (默认) 提交时,数据跟在URL地址之后
- post提交时,数据在请求体内
enctype 在 post 请求时,指定数据的格式
- application/x-www-form-urlencoded (默认)
- multipart/form-data
其中表单提供多种收集数据的方式
- 有 name 属性的表单项数据,才会被发送给服务器
<form action="http://localhost:8080/form"> <input type="text" name="username"> <input type="submit" value="提交"> </form>
2、通过Java程序理解表单
<dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>2.7.0</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.2.1.RELEASE</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <version>2.2.1.RELEASE</version> <scope>test</scope> </dependency> </dependencies> <build> <pluginManagement> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>3.0.2</version> </plugin> </plugins> </pluginManagement> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
package com.csdn.js; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; @Controller public class MyController { @RequestMapping("/form") @ResponseBody public String form(String username) { System.out.println("username:" + username); return "收到数据"; } }
package com.csdn.js; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.web.servlet.ServletComponentScan; @SpringBootApplication @ServletComponentScan public class MyApp { public static void main(String[] args) { SpringApplication.run(MyApp.class, args); } }
- 启动服务器,输入内容,提交表单
3、提交多个数据
<dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-dependencies</artifactId> <version>2.7.0</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.2.1.RELEASE</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <version>2.2.1.RELEASE</version> <scope>test</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <version>1.18.20</version> </dependency> </dependencies> <build> <pluginManagement> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <version>3.0.2</version> </plugin> </plugins> </pluginManagement> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build>
<form action="http://localhost:8080/form" method="post" enctype="multipart/form-data"> <input type="text" name="username"><hr> <input type="password" name="password"><hr> <input type="hidden" name="id" value="1"><hr> <input type="date" name="birthday"><hr> 男<input type="radio" name="sex" value="男" checked> 女<input type="radio" name="sex" value="女"><hr> 唱歌<input type="checkbox" name="fav" value="唱歌"> 逛街<input type="checkbox" name="fav" value="逛街"> 游戏<input type="checkbox" name="fav" value="游戏"><hr> <input type="file" name="avatar"><hr> <input type="submit" value="提交"> </form>
package com.csdn.js; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import org.springframework.format.annotation.DateTimeFormat; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import org.springframework.web.multipart.MultipartFile; import java.time.LocalDate; import java.util.List; @Controller public class MyController { @RequestMapping("/form") @ResponseBody public String form(User user, MultipartFile avatar) { System.out.println("user:" + user); System.out.println("avatar:" + avatar.getSize());//得到文件的字节数 return "收到数据"; } @Data @NoArgsConstructor @AllArgsConstructor static class User { private String username; private String password; private int id; //前端的日期格式是 2023-10-29 后端需要日期时间格式 @DateTimeFormat(pattern = "yyyy-MM-dd") private LocalDate birthday; private String sex; private List<String> fav; } }
package com.csdn.js; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.web.servlet.ServletComponentScan; @SpringBootApplication @ServletComponentScan public class MyApp { public static void main(String[] args) { SpringApplication.run(MyApp.class, args); } }