前端发送请求格式
1.multipart/form-data格式发送请求参数
什么时候用:
- 当后端API要求以表单的形式接收数据时,比如
<input type="text" name="username">
和<input type="password" name="password">
,这些数据通常以键值对的形式发送。 - 当上传文件时,比如上传图片等等。。。
前端代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>springboot-test</title>
</head>
<body>
<form>
<label>用户名:</label>
<input id="username" type="text" placeholder="username"><br>
<label>密码:</label>
<input id="password" type="password" placeholder="password"><br>
<input id="submit" type="button" value="提交">
</form>
<script src="js/axios.min.js"></script>
<script>
const username = document.querySelector('#username')
const password = document.querySelector('#password')
const submit = document.querySelector('#submit')
submit.addEventListener('click', async () => {
const formData = new FormData()
formData.append('username', username.value)
formData.append('password', password.value)
await axios({
url: 'http://localhost:8080/test',
method: 'post',
data: formData
}).then(result=>{
console.log(result.data)
}).catch(error=>{
console.log(error)
})
})
</script>
</body>
</html>
后端代码:
package com.akbar.urltest.controller;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("test")
public class TestController {
@PostMapping
public String formDataTest(String username,String password) {
System.out.println("----------------------------------------------------");
System.out.println("username:"+username);
System.out.println("password:"+password);
System.out.println("----------------------------------------------------");
return "后端成功收到username:"+username+",password:"+password;
}
}
apifox:
2.query string查询字符串
什么时候用:
- 当你发送的数据需要附加在URL之后,作为GET请求的一部分时,使用查询字符串(query string)。
- 当数据简单,如键值对,并且不需要在请求体中发送时。
前端代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>query-string发送请求参数</title>
</head>
<body>
<form>
<label>用户名:</label>
<input id="username" type="text" placeholder="username"><br>
<label>密码:</label>
<input id="password" type="password" placeholder="password"><br>
<input id="submit" type="button" value="提交">
</form>
<script src="js/axios.min.js"></script>
<script>
const username = document.querySelector('#username')
const password = document.querySelector('#password')
const submit = document.querySelector('#submit')
submit.addEventListener('click', async () => {
await axios({
url: 'http://localhost:8080/test',
method: 'get',
params:{
username: username.value,
password: password.value
}
}).then(result=>{
console.log(result.data)
}).catch(error=>{
console.log(error)
})
})
</script>
</body>
</html>
后端代码:
package com.akbar.urltest.controller;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("test")
public class TestController {
@GetMapping
public String formDataTest(String username,String password) {
System.out.println("----------------------------------------------------");
System.out.println("username:"+username);
System.out.println("password:"+password);
System.out.println("----------------------------------------------------");
return "后端成功收到username:"+username+",password:"+password;
}
}
apifox:
3.application/json
- 当你发送的数据是JavaScript对象,并且后端API期望接收JSON格式的数据时,使用
application/json
。 - 当数据结构复杂,需要以嵌套对象或数组的形式发送时。
前端代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>application/json格式发请求</title>
</head>
<body>
<form>
<label>用户名:</label>
<input id="username" type="text" placeholder="username"><br>
<label>密码:</label>
<input id="password" type="password" placeholder="password"><br>
<input id="submit" type="button" value="提交">
</form>
<script src="js/axios.min.js"></script>
<script>
const username = document.querySelector('#username')
const password = document.querySelector('#password')
const submit = document.querySelector('#submit')
submit.addEventListener('click', async () => {
await axios({
url: 'http://localhost:8080/test',
method: 'post',
data:{
username: username.value,
password: password.value
}
}).then(result=>{
console.log(result.data)
}).catch(error=>{
console.log(error)
})
})
</script>
</body>
</html>
虽然我们在data里面写的不是json格式的数据,但是只要我们在data里面用JavaScript对象的格式写数据,axios会帮我们转换成json字符串格式。
后端代码:
package com.akbar.urltest.controller;
import com.akbar.urltest.pojo.User;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("test")
public class TestController {
@PostMapping
public String formDataTest(@RequestBody User user) {
System.out.println("----------------------------------------------------");
System.out.println("username:"+user.getUsername());
System.out.println("password:"+user.getPassword());
System.out.println("----------------------------------------------------");
return "后端成功收到"+user;
}
}
因为前端发送的时json字符串格式的对象(我暂时就这么理解的),所以后端接受要用对应的对象接受,比如user对象,然后别忘了用@RequestBody注解。
User.java实体类
package com.akbar.urltest.pojo;
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
@Override
public String toString() {
return "User{" +
"username='" + username + '\'' +
", password='" + password + '\'' +
'}';
}
}
apifox:
4.Path Parameters(路径参数)
- 当需要指定资源的唯一标识符时,使用路径参数。例如,获取特定用户的信息,URL可能是
/users/{userId}
,其中{userId}
是一个路径参数。 - 路径参数通常用于GET、PUT、DELETE等请求方法,因为这些方法通常与获取、更新或删除特定资源相关。
- 路径参数是URL的一部分,因此它们在请求的URL中清晰可见,这有助于客户端和服务器端理解请求的上下文。
前端代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>application/json格式发请求</title>
</head>
<body>
<input id="submit" type="button" value="提交">
<script src="js/axios.min.js"></script>
<script>
submit.addEventListener('click', async () => {
const id = 1
await axios({
url: `http://localhost:8080/test/${id}`,
method: 'get',
}).then(result => {
console.log(result.data)
}).catch(error => {
console.log(error)
})
})
</script>
</body>
</html>
后端代码:
package com.akbar.urltest.controller;
import com.akbar.urltest.pojo.User;
import org.springframework.web.bind.annotation.*;
@CrossOrigin
@RestController
@RequestMapping("test")
public class TestController {
@GetMapping("{id}")
public String formDataTest(@PathVariable Integer id) {
System.out.println("----------------------------------------------------");
System.out.println("id:"+id);
System.out.println("----------------------------------------------------");
return "后端成功收到:"+id;
}
}
apifox: