前端后端数据传递的几种方式

记录一下前端不同形式传递数据，后端的接收的方式

1. form表单

<form action="/api/user/add" method="POST">
    <div class="form-group">
        <label for="name">name</label>
        <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
    </div>
    <div class="form-group">
        <label for="age">age</label>
        <input type="text" class="form-control" name="age" id="age" placeholder="年龄">
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

设置action，method设置为post

设置的name和表单的输入值作为value组将成键值对

点击提交按钮

打开chrome浏览器，按f12进入开发者模式，可以看到请求头信息

post在请求头中包含Content-Type: application/x-www-form-urlencoded

可以看到数据是form Data形式

创建对应的实体类User ，成员和name属性对应

@Data//如果直接返回此类型需要加上getter 方法才能被序列化
public class User {
    private String name;
    private int age;
    private String avatar;
}

控制器

@Controller
@RequestMapping("/api/user")
public class UserController {
    @PostMapping("/add")
    @ResponseBody//返回json格式数据
    public User addUser(User user){
        System.out.println("request param1:"+user);
        return user;//这里仅把请求参数直接返回
    }
}

or

@Controller
@RequestMapping("/api/user")
public class UserController {
    @PostMapping("/add")
    @ResponseBody//数据以json格式返回
    public User addUser(String name,int age){
        System.out.println("request param1:"+user);
        return new User(name,age,null);//这里仅把请求参数直接返回
    }
}

如果是get请求

参数会像是这样在url上http://localhost:8080/api/user/add?name=%E5%BC%A0%E4%B8%89&age=12

汉字显示为编码后的样子

当需要自定义请求参数的名字时我们可以使用spring注解@RequestParam

@RequestMapping("/add")
@ResponseBody
public User addUser(@RequestParam("name") String username,
                    @RequestParam("age")int userage){

    System.out.println("request param1:"+username);
    System.out.println("request param2:"+userage);

    return new User(username,userage,null);
}

2. ajax & formdata

<form action="/api/user/add" method="POST">
        <div class="form-group">
            <label for="name">name</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="age">age</label>
            <input type="text" class="form-control" name="age" id="age" placeholder="年龄">
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    <script>
        $('button').click(function (e) {
            e.preventDefault();
            var fd = new FormData();
            fd.append("name",$('input[name=name]').val());
            fd.append("age",$('input[name=age]').val());
            console.log(fd.get('name'));
            console.log(fd.get('age'));
            $.ajax({
                url:"/api/user/add",
                data: fd,
                processData: false,
                contentType: false,//必须
                type: 'POST',
                success: function(data){
                    alert(data.name);
                }
            });
        });
    </script>

接收方式同上 使用对象或者对应的name作为参数

3. ajax json

$('button').click(function (e) {
            e.preventDefault();//阻止默认事件
           var user = {};
            var fd = new FormData();
            user.name = $('input[name=name]').val();
            user.age = $('input[name=age]').val();
            console.log(user);
            $.ajax({
                url:"/api/user/add",
                data: JSON.stringify(user),
                processData: false,
                contentType: 'application/json',
                type: 'POST',
                success: function(data){
                    alert(data.name);
                }
            });
        });

传递json格式字符串

我们手动设置contentType为'application/json' 此时查看请求，发现数据是这样的

@Controller
@RequestMapping("/api/user")
public class UserController {

    @RequestMapping("/add")
    @ResponseBody
    public User addUser(@RequestBody User user){ //对应实体类
        System.out.println("request param1:"+user);
        return user;
    }
}

后台接收数据使用@RequestBody注解，就能拿到数据

content-type为 application/json时必须用 @RequestBody否则不会进入后端控制器
而使用form-data时， 则必须不加@RequestBody

或者 ，你也可以使用String 类型，然后自己解析

@RequestMapping("/add")
@ResponseBody
public User addUser(@RequestBody String user){ //字符串

    ObjectMapper mapper = new ObjectMapper();
    User u = null;
    try {
        u = mapper.readValue(user, User.class);
    } catch (JsonProcessingException e) {
        e.printStackTrace();
    }
    System.out.println("request param1:"+u);
    return u;
}

4. path variable

请求地址：/api/app/123
参数： appid = 123
后端接口：

@GetMapping("/api/app/{appid}")
public String getApp(@PathVariable String appid){
	...
}

参数中包含数组

<h1>用户注册</h1>
    <form action="/api/user/add" method="POST">
        <div class="form-group">
            <label for="name">name</label>
            <input type="text" class="form-control" name="name" id="name" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="age">age</label>
            <input type="text" class="form-control" name="age" id="age" placeholder="年龄">
        </div>
        <div class="form-group">
            <label for="age">friends</label>
            <div>
                周杰伦<input type="checkbox" class="form-control" value="周杰伦" name="friends">
            </div>
            <div>
                许嵩<input type="checkbox" class="form-control" value="许嵩" name="friends">
            </div>
            <div>
                筷子兄弟<input type="checkbox" class="form-control" value="筷子兄弟" name="friends">
            </div>
        </div>
        <button type="submit" class="btn btn-default">提交</button>
    </form>
    <script>
        $('button').click(function (e) {
            e.preventDefault();//阻止默认事件
            var user = {};
            var fd = new FormData();
            user.name = $('input[name=name]').val();
            user.age = $('input[name=age]').val();
            user.friends = [];
            $('input[type=checkbox]').each(function () {
                if($(this).is(':checked')){
                    user.friends.push($(this).val());
                }
            })

            //console.log(user);
            $.ajax({
                url:"/api/user/add",
                data: JSON.stringify(user),
                processData: false,
                contentType: 'application/json',
                type: 'POST',
                success: function(data){
                    alert(data.name);
                }
            });
        });
    </script>

@Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
    private String name;
    private int age;
    private String avatar;
    private List<String> friends;
}

新增friend属性,接收方式不变

参数校验：

添加hibernate-validator依赖
可以在请求实体内加验证注解
e.g

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Account {
    private String id;
    @NotNull
    @Length(max = 20)
    private String userName;
    @NotNull
    @Pattern(regexp = "[A-Z][a-z][0-9]")
    private String passWord;
    @DateTimeFormat(pattern = "yyy-MM-dd")
    private Date createTime;
    private String alias;
    @Max(10)
    @Min(1)
    private Integer level;
    private Integer vip;
}

 @PostMapping("/saveAccount")
    public Object saveAccount(@RequestBody @Valid Account account){
         accountService.saveAccount(account);
        return "保存成功";
}

当请求数据时form-data时,你的请求参数实体是不会为空的（即使前端不传， 对象字段为默认而已）所以不需要加判断

当请求数据时application/json 时,你的请求参数实体 也不用判断一下， 因为不添加body参数，是不会进控制器的，spring只会警告。

为了防止前端传一个空对象 {} 过来， 可以判断一下请求参数实体是否为空。

欢迎评论交流啊