springboot与web页面交互

一、后台接收URL拼接参数

后台代码：

@GetMapping("/item/{code}")    //对应的链接为：/item/10001
public List<Description> getProduct(@PathVariable("code") String productCode) {
    //your code  
}

二、后台接收查询参数

后台代码：

@GetMapping("/detail")    //对应的链接为：/detail?code=&name=
public String listMaterial(@RequestParam("code") String productCode, @RequestParam("name") String productName) {
    //your code
}

前台代码：

1.通过表单提交

2.通过JavaScript使用Formdata对象提交

三、后台接收json

后台代码：

@PostMapping("/add")
public MaterialStandard addProduct(@RequestBody Product product ){
    //your code
}

前台代码：

1.通过JavaScript提交

var product = new Product();
$.ajax({
    url:"/add",
    type:"POST",
    data:JSON.stringify(product),
    contentType: "application/json;charset=UTF-8",
    accept : "*/*",
    success : function () {
        console.log("Successfully");
    }
});    //使用了jQuery，原生JavaScript同理

四、接收文件

后台代码：

@PostMapping("/upload")
public String upload(@RequestParam("file") MultipartFile file) {
    //your code
}

前台代码：

1.通过表单提交

2.通过JavaScript使用FormData对象提交

<input type="file" id="file" name="file">

var fileInput = $("#file");
var selectedFile = fileInput[0].files[0];
var data = new FormData();
data.append("file", selectedFile);
$.ajax({
    url: '/upload',
    type: 'POST',
    data: data,
    contentType: false, //不设置内容类型
    processData: false, //不处理数据
    accept : "*/*",
    success : function () {
        console.log("Successfully");
    }
});    使用了jQuery，原生JavaScript同理