ajax 与controller数据交互

一、后台接收URL拼接参数
后台代码：

@GetMapping("/item/{code}") //对应的链接为：/item/10001
public List getProduct(@PathVariable(“code”) String productCode) {
//your code
}
注意：这种拼接传递的参数里不能有 “/” ,所以不能传递 URL类型参数。

二、后台接收查询参数
后台代码：

@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对象提交

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同理