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

记录一下前端不同形式传递数据，后端的接收的方式
引入thymeleaf 模板引擎，jquery,bootsrtap(可选)

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注解，就能拿到数据

或者 ，你也可以使用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;
}

参数中包含数组

<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属性,接收方式不变

完
不足之处，欢迎评论指出