当前位置：首页 > article >正文

前端发送请求格式

article 2024/10/25 4:25:16

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：