前、后端常见请求方式，一篇文章带你解决

原创 已于 2025-04-01 10:58:37 修改 · 665 阅读 · 15 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
GEO检测
标签
#java #spring boot #ajax #postman
于 2025-03-29 16:18:16 首次发布

注意点

  • 无注解传参
    • 方式一：参数名字与服务端参数一致，自动绑定
      • method(String param1, String param2）
    • 方式二：传封装实体参数
    • method(RequestDTO requestBody)
  • 数组参数：
    • 方式一：使用@RequestParam解析相同参数，然后将相同参数的值组成一个数组
      • method(@RequestParam List<String> param3)
    • 方式二：使用@RequestBody 直接传数组(推荐）
      • method(@RequestBody RequestDTO requestBody)
  • @PathVariable只能解析单个参数，无法解析数组，可以借助@RequestParam或@RequestBody

Axios封装

import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
    baseURL: 'http://localhost:8080/api/example', // 基础 URL
    timeout: 5000, // 请求超时时间
});

// 封装通用的请求方法
const request = async (method, url, data = {}, params = {}) => {
    try {
        const response = await instance({
            method,
            url,
            data, // POST/PUT 请求体
            params, // GET/DELETE 请求参数
        });
        return response.data;
    } catch (error) {
        console.error('Request failed:', error);
        throw error;
    }
};

export default request;

GET 请求

无参请求

服务端

@GetMapping("/getNoAnnotation")
public String getNoAnnotation(String param1, String param2, @RequestParam  List<String> param3) {
    return "GET No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const getNoAnnotation = async (param1, param2, param3) => {
    return request('get', '/getNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
getNoAnnotation('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

@RequestParam

服务端

@GetMapping("/getWithAnnotation")
public String getWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
    return "GET With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const getWithAnnotation = async (param1, param2, param3) => {
    return request('get', '/getWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
getWithAnnotation('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

@PathVariable

服务端

 @GetMapping("/getWithPathVariable/{param1}/{param2}")
public String getWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
    return "GET With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const getWithPathVariable = async (param1, param2, param3) => {
    return request('get', `/getWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
getWithPathVariable('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

Post请求

无参请求

服务端

 @PostMapping("/postNoAnnotation")
public String postNoAnnotation(String param1, String param2, @RequestParam List<String> param3) {
    return "POST No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const postNoAnnotation = async (param1, param2, param3) => {
    return request('post', '/postNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
postNoAnnotation('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

@RequestParam

服务端

 @PostMapping("/postWithAnnotation")
public String postWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
    return "POST With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const postWithAnnotation = async (param1, param2, param3) => {
    return request('post', '/postWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
postWithAnnotation('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

@PathVariable

服务端

@PostMapping("/postWithPathVariable/{param1}/{param2}")
public String postWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
    return "POST With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
}

客户端

import request from './request';

const postWithPathVariable = async (param1, param2, param3) => {
    return request('post', `/postWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

// 调用示例
postWithPathVariable('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

请求body无注解

服务端

@PostMapping("/postNoWithBody")
public String postNoWithBody( RequestDTO requestBody) {
    return "POST No With Body: " + requestBody.toString();
}

客户端

import request from './request';

const postNoWithBody = async (requestBody) => {
    return request('post', '/postNoWithBody', requestBody);
};

// 调用示例
postNoWithBody({ param1: 'value1', param2: 'value2',param3:['item1','item2'] })
    .then(response => console.log(response))
    .catch(error => console.error(error));

@RequestBody

服务端

@PostMapping("/postWithBody")
public String postWithBody(@RequestBody RequestDTO requestBody) {
    return "POST With Body: " + requestBody.toString();
}

客户端

http://localhost:8080/api/example/postWithBody

import request from './request';

const postWithBody = async (requestBody) => {
    return request('post', '/postWithBody', requestBody);
};

// 调用示例
postWithBody({ param1: 'value1', param2: 'value2',param3:['item1','item2'] })
    .then(response => console.log(response))
    .catch(error => console.error(error));

Put/Delete请求与Post相似

完整用例

Java

import org.example.domain.dto.RequestDTO;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/api/example")
public class RequestExampleController {

    // GET
    @GetMapping("/getNoAnnotation")
    public String getNoAnnotation(String param1, String param2, @RequestParam  List<String> param3) {
        return "GET No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @GetMapping("/getWithAnnotation")
    public String getWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
        return "GET With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @GetMapping("/getWithPathVariable/{param1}/{param2}")
    public String getWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
        return "GET With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    // POST 无参请求不能绑定数组，只能绑定单个参数，可以使用 @RequestParam或 @RequestBody
    @PostMapping("/postNoAnnotation")
    public String postNoAnnotation(String param1, String param2, @RequestParam List<String> param3) {
        return "POST No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PostMapping("/postWithAnnotation")
    public String postWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
        return "POST With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PostMapping("/postWithPathVariable/{param1}/{param2}")
    public String postWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
        return "POST With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PostMapping("/postNoWithBody")
    public String postNoWithBody( RequestDTO requestBody) {
        return "POST No With Body: " + requestBody.toString();
    }
    @PostMapping("/postWithBody")
    public String postWithBody(@RequestBody RequestDTO requestBody) {
        return "POST With Body: " + requestBody.toString();
    }

    // PUT
    @PutMapping("/putNoAnnotation")
    public String putNoAnnotation(String param1, String param2, @RequestParam List<String> param3) {
        return "PUT No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PutMapping("/putWithAnnotation")
    public String putWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
        return "PUT With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PutMapping("/putWithPathVariable/{param1}/{param2}")
    public String putWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
        return "PUT With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @PutMapping("/putNoWithBody")
    public String putNoWithBody( RequestDTO requestBody) {
        return "PUT No With Body: " + requestBody.toString();
    }

    @PutMapping("/putWithBody")
    public String putWithBody(@RequestBody RequestDTO requestBody) {
        return "PUT With Body: " + requestBody.toString();
    }

    // DELETE
    @DeleteMapping("/deleteNoAnnotation")
    public String deleteNoAnnotation(String param1, String param2, @RequestParam List<String> param3) {
        return "DELETE No Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @DeleteMapping("/deleteWithAnnotation")
    public String deleteWithAnnotation(@RequestParam String param1, @RequestParam String param2, @RequestParam List<String> param3) {
        return "DELETE With Annotation: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }

    @DeleteMapping("/deleteWithPathVariable/{param1}/{param2}")
    public String deleteWithPathVariable(@PathVariable String param1, @PathVariable String param2, @RequestParam List<String> param3) {
        return "DELETE With Path Variable: param1=" + param1 + ", param2=" + param2 + ", param3=" + param3;
    }
}

import java.util.List;

public class RequestDTO {
    private String param1;
    private String param2;

    List<String> param3;

    // Getters and Setters
    public String getParam1() {
        return param1;
    }

    public void setParam1(String param1) {
        this.param1 = param1;
    }

    public String getParam2() {
        return param2;
    }

    public void setParam2(String param2) {
        this.param2 = param2;
    }

    public List<String> getParam3() {
        return param3;
    }
    public void setParam3(List<String> param3) {
        this.param3 = param3;
    }
    @Override
    public String toString() {
        return "RequestBodyExample{" +
                "param1='" + param1 + '\'' +
                ", param2='" + param2 + '\'' +
                ", param3=" + param3 + '\'' +
                '}';
    }
}

前端

import request from './request'; // 引入封装的 request 方法

// GET 请求
export const getNoAnnotation = (param1, param2, param3) => {
    return request('get', '/getNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const getWithAnnotation = (param1, param2, param3) => {
    return request('get', '/getWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const getWithPathVariable = (param1, param2, param3) => {
    return request('get', `/getWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

// POST 请求
export const postNoAnnotation = (param1, param2, param3) => {
    return request('post', '/postNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const postWithAnnotation = (param1, param2, param3) => {
    return request('post', '/postWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const postWithPathVariable = (param1, param2, param3) => {
    return request('post', `/postWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

export const postNoWithBody = (requestBody) => {
    return request('post', '/postNoWithBody', requestBody);
};

export const postWithBody = (requestBody) => {
    return request('post', '/postWithBody', requestBody);
};

// PUT 请求
export const putNoAnnotation = (param1, param2, param3) => {
    return request('put', '/putNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const putWithAnnotation = (param1, param2, param3) => {
    return request('put', '/putWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const putWithPathVariable = (param1, param2, param3) => {
    return request('put', `/putWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

export const putNoWithBody = (requestBody) => {
    return request('put', '/putNoWithBody', requestBody);
};

export const putWithBody = (requestBody) => {
    return request('put', '/putWithBody', requestBody);
};

// DELETE 请求
export const deleteNoAnnotation = (param1, param2, param3) => {
    return request('delete', '/deleteNoAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const deleteWithAnnotation = (param1, param2, param3) => {
    return request('delete', '/deleteWithAnnotation', {}, {
        param1,
        param2,
        param3, // 重复添加 param3 参数
    });
};

export const deleteWithPathVariable = (param1, param2, param3) => {
    return request('delete', `/deleteWithPathVariable/${param1}/${param2}`, {}, {
        param3, // 重复添加 param3 参数
    });
};

import {
    getNoAnnotation,
    getWithAnnotation,
    getWithPathVariable,
    postNoAnnotation,
    postWithAnnotation,
    postWithPathVariable,
    postNoWithBody,
    postWithBody,
    putNoAnnotation,
    putWithAnnotation,
    putWithPathVariable,
    putNoWithBody,
    putWithBody,
    deleteNoAnnotation,
    deleteWithAnnotation,
    deleteWithPathVariable,
} from './api';

// 调用示例
getNoAnnotation('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

postWithBody({ { param1: 'value1', param2: 'value2',param3:['item1','item2'] } })
    .then(response => console.log(response))
    .catch(error => console.error(error));

deleteWithPathVariable('value1', 'value2', ['item1', 'item2'])
    .then(response => console.log(response))
    .catch(error => console.error(error));

 postman

{
	"info": {
		"_postman_id": "68a4b07f-9070-4e5c-bff6-7a6f53b9ae85",
		"name": "常见请求方式",
		"schema": "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
		"_exporter_id": "43125700"
	},
	"item": [
		{
			"name": "getWithAnnotation",
			"request": {
				"method": "GET",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/getWithAnnotation?param1=value1&param2=value2&param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"getWithAnnotation"
					],
					"query": [
						{
							"key": "param1",
							"value": "value1"
						},
						{
							"key": "param2",
							"value": "value2"
						},
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "getWithAnnotation",
			"request": {
				"method": "GET",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/getWithAnnotation?param1=value1&param2=value2&param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"getWithAnnotation"
					],
					"query": [
						{
							"key": "param1",
							"value": "value1"
						},
						{
							"key": "param2",
							"value": "value2"
						},
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "getWithPathVariable",
			"request": {
				"method": "GET",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/getWithPathVariable/value1/value2?param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"getWithPathVariable",
						"value1",
						"value2"
					],
					"query": [
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "postNoAnnotation",
			"request": {
				"method": "POST",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "param1",
							"value": "value1",
							"type": "text"
						},
						{
							"key": "param2",
							"value": "value2",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item1",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item2",
							"type": "text"
						}
					]
				},
				"url": {
					"raw": "http://localhost:8080/api/example/postNoAnnotation",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"postNoAnnotation"
					]
				}
			},
			"response": []
		},
		{
			"name": "postWithAnnotation",
			"request": {
				"method": "POST",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/postWithAnnotation?param1=value1&param2=value2&param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"postWithAnnotation"
					],
					"query": [
						{
							"key": "param1",
							"value": "value1"
						},
						{
							"key": "param2",
							"value": "value2"
						},
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "postWithPathVariable",
			"request": {
				"method": "POST",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/postWithPathVariable/value1/value2?param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"postWithPathVariable",
						"value1",
						"value2"
					],
					"query": [
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "postNoWithBody",
			"request": {
				"method": "POST",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "param1",
							"value": "value1",
							"type": "text"
						},
						{
							"key": "param1",
							"value": "value2",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item1",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item2",
							"type": "text"
						}
					]
				},
				"url": {
					"raw": "http://localhost:8080/api/example/postNoWithBody",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"postNoWithBody"
					]
				}
			},
			"response": []
		},
		{
			"name": "postWithBody",
			"request": {
				"method": "POST",
				"header": [],
				"body": {
					"mode": "raw",
					"raw": "{\r\n    \"param1\": \"value1\",\r\n    \"param2\": \"value2\",\r\n    \"param3\": [\"item1\",\"item2\"]\r\n}",
					"options": {
						"raw": {
							"language": "json"
						}
					}
				},
				"url": {
					"raw": "http://localhost:8080/api/example/postWithBody",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"postWithBody"
					]
				}
			},
			"response": []
		},
		{
			"name": "putNoAnnotation",
			"request": {
				"method": "PUT",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "param1",
							"value": "value1",
							"type": "text"
						},
						{
							"key": "param2",
							"value": "value2",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item1",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item2",
							"type": "text"
						}
					]
				},
				"url": {
					"raw": "http://localhost:8080/api/example/putNoAnnotation",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"putNoAnnotation"
					]
				}
			},
			"response": []
		},
		{
			"name": "putWithAnnotation",
			"request": {
				"method": "PUT",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/putWithAnnotation?param1=value1&param2=value2&param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"putWithAnnotation"
					],
					"query": [
						{
							"key": "param1",
							"value": "value1"
						},
						{
							"key": "param2",
							"value": "value2"
						},
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "putWithPathVariable",
			"request": {
				"method": "PUT",
				"header": [],
				"body": {
					"mode": "raw",
					"raw": "{\r\n    \"param1\": \"value1\",\r\n    \"param2\": \"value2\",\r\n    \"param3\": [\"item1\",\"item2\"]\r\n}",
					"options": {
						"raw": {
							"language": "json"
						}
					}
				},
				"url": {
					"raw": "http://localhost:8080/api/example/putWithPathVariable",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"putWithPathVariable"
					]
				}
			},
			"response": []
		},
		{
			"name": "putNoWithBody",
			"request": {
				"method": "PUT",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "param1",
							"value": "value1",
							"type": "text"
						},
						{
							"key": "param2",
							"value": "value2",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item1",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item2",
							"type": "text"
						}
					]
				},
				"url": {
					"raw": "http://localhost:8080/api/example/putNoWithBody",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"putNoWithBody"
					]
				}
			},
			"response": []
		},
		{
			"name": "putWithBody",
			"request": {
				"method": "PUT",
				"header": [],
				"body": {
					"mode": "raw",
					"raw": "{\r\n    \"param1\": \"value1\",\r\n    \"param2\": \"value2\",\r\n    \"param3\": [\"item1\",\"item2\"]\r\n}",
					"options": {
						"raw": {
							"language": "json"
						}
					}
				},
				"url": {
					"raw": "http://localhost:8080/api/example/putWithBody",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"putWithBody"
					]
				}
			},
			"response": []
		},
		{
			"name": "deleteNoAnnotation",
			"request": {
				"method": "DELETE",
				"header": [],
				"body": {
					"mode": "formdata",
					"formdata": [
						{
							"key": "param1",
							"value": "value1",
							"type": "text"
						},
						{
							"key": "param2",
							"value": "value2",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item1",
							"type": "text"
						},
						{
							"key": "param3",
							"value": "item2",
							"type": "text"
						}
					]
				},
				"url": {
					"raw": "http://localhost:8080/api/example/deleteNoAnnotation",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"deleteNoAnnotation"
					]
				}
			},
			"response": []
		},
		{
			"name": "deleteWithAnnotation",
			"request": {
				"method": "DELETE",
				"header": [],
				"url": {
					"raw": "http://localhost:8080/api/example/deleteWithAnnotation?param1=value1&param2=value2&param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"deleteWithAnnotation"
					],
					"query": [
						{
							"key": "param1",
							"value": "value1"
						},
						{
							"key": "param2",
							"value": "value2"
						},
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		},
		{
			"name": "deleteWithPathVariable",
			"request": {
				"method": "DELETE",
				"header": [],
				"body": {
					"mode": "raw",
					"raw": "",
					"options": {
						"raw": {
							"language": "json"
						}
					}
				},
				"url": {
					"raw": "http://localhost:8080/api/example/deleteWithPathVariable/value1/value2?param3=item1&param3=item2",
					"protocol": "http",
					"host": [
						"localhost"
					],
					"port": "8080",
					"path": [
						"api",
						"example",
						"deleteWithPathVariable",
						"value1",
						"value2"
					],
					"query": [
						{
							"key": "param3",
							"value": "item1"
						},
						{
							"key": "param3",
							"value": "item2"
						}
					]
				}
			},
			"response": []
		}
	]
}

前后端交互的请求方式
qq_46015513的博客
07-20 1503
前后端交互的请求方式 + 不止局限于 ajax 请求 + 只要是网络请求, 就分请求方式 1. 八种常见的请求方式 1-1. GET: 偏向获取的语义 1-2. POST: 偏向于提交的语义 1-3. PUT: 偏向于提交的语义, 偏向于提交添加 1-4. DELETE: 偏向于提交删除的语义 1-5. PATCH: 偏向于提交的语义, 偏向于提交修改 1...
前后端请求、返回数据的多种方式
weixin_53752776的博客
10-23 3634
前端发送过来的请求先到Controller层，Controller接收到你的请求，然后调用Service层进行业务逻辑处理，Service层又去调用Mapper层，Mapper层进行和数据库关系映射，查询出来的数据原路返回到前端，如果不操作数据库就不需要Mapper映射。：这个方法是我们项目开发的过程中最常见的方法，返回值得类型由我们来同统一封装，返回的时候我们直接把返回的结果放在我们封装好的返回结果集里面，大部分情况我们会在result里面封装： 状态码；它将数据存储在请求体中，不会出现在URL中。
前端后端交互请求的几种方式
qq_56921846的博客
07-04 2059
1. GET：获取资源，请求参数在URL中传递，一般用于数据查询操作。 2. POST：提交数据，请求参数在请求体中传递，一般用于数据新增和修改操作。 3. PUT：更新数据，请求参数在请求体中传递，一般用于数据更新操作。 4. DELETE：删除数据，请求参数在URL中传递，一般用于数据删除操作。
前后端交互、发送请求：GET和POST请求比较（全面总结）
qq_46119575的博客
02-02 7417
很多朋友都遇到过写代码时，需要从前端发送请求到后端。常见的发送请求方式有两种：GET和POST。 GET和POST有共同之处，也有不同的地方，本文总结介绍了这两种请求方式的区别和相似之处，对两种进行比较（全面比较）。
前端请求后端数据的三种方式！
xiaoxijinger的博客
05-31 1万+
在前后端分离的开发项目中，前后端联调的时候会出现这样那样的问题，尤其是在调取数据的程序上面，有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据，下面小千就来给大家详解一下常见的三种数据传输方式。 1、地址栏传输数据 1）、query string Parameters： 当请求方式是get时，浏览器会使用查询字符串的方式进行传递数据，即：query string Parameters 查询字符串的规则：请求参数使用 URL地址和“问号传参“ 的方式进行传递----用问号把url和请求参数分开。
一篇文章带你精通Charles抓包！
ZDK_001的博客
10-24 6459
Charles是一款代理软件，通过将Charles设置为代理服务，可以用Charles抓取请求数据和结果，也可以转发、伪造数据。Charles的主要特点有：支持SSL代理，可以抓取分析HTTP和HTTPS请求。支持流量控制，可以模拟慢速网络以及等待时间较长的请求。支持AJAX和AMF调试，可以自动将json、xml或Flash Remoting、Flex Remoting信息格式化，方便查看。支持网络请求转发，方便后端调试。支持修改网络请求参数，支持网络请求的截获并动态修改。
一篇文章带你玩转charles安装以及功能详细说明
测试开发漫漫成长路的博客
11-15 1363
Charles 是一个 HTTP 代理服务器、HTTP 监视器、反转代理服务器，当浏览器连接 Charles 的代理访问互联网时，Charles 可以监控浏览器发送和接收的所有数据。它允 许一个开发者查看所有连接互联网的 HTTP 通信，这些包括 request，response 和 HTTP headers （包含 cookies 与 caching 信息）。
前端学习——前后端交互
m0_54657091的博客
07-25 2910
是一个在客户端的存储空间，当你的代码运行在浏览器的时候，一大部分浏览器功能是用来给页面显示的，一小部分位置是专门来存储一些数据，cookie空间里面可以以字符串的形式来存储一些数据， 每一个cookie信息包含过期时间，达到时间时，cookie自动删除。在浏览器同源的位置设置一个代理服务器，请求服务器发送请求给代理服务器，由代理服务器 转发请求给 目标服务器，由目标服务器 把响应内容返回给 代理服务器，由代理服务器 再把响应内容返回给 请求服务器，请求服务器 给浏览器数据 渲染。
实战电商后端系统（三）—— 以vue-element-admin为基础的前端项目对接后端接口
你要悄悄的拔尖，然后惊艳所有人
07-26 3581
文章目录前言正文1. 项目初始化2. 精简项目3. 替换mock接口，对接后端接口3.1 修改/src/api/user.js3.2 修改项目中请求方式4. 效果展示参考相关文章 前言 本系统技术栈用到了Dubbo、Zookeeper、SpringBoot、Oauth2、Swagger、Nginx，项目刚开始起步，每完成一个大功能都会专门写一篇博文来记录技术细节以及遇到的技术难点，如项目中有哪些设计或者架构不太正确的地方，请大家在留言区中提出，互相学习~ 前两篇博文已经详细讲解了如何搭建项目基础架构以及My
前端请求后端的几种方式
m0_61820867的博客
07-24 8536
最近参考了几篇博客，做一个个人总结前端如何调用后端的服务（前端如何请求后端）
前后端交互——HTTP请求及协议格式详解
weixin_46515434的博客
09-02 2107
详解HTTP请求的请求体、响应体、状态码。
HTTP中常用的4种请求方式——前端如何发送？后端怎么接受？
m0_74808313的博客
09-02 4982
GET请求是‌HTTP协议中的一种请求方法，主要用于从服务器获取资源。它是一种简单、安全且可缓存的请求方式，常用于在Web浏览器中访问网页或发送数据。GET请求通过将请求参数附加到URL中，以查询字符串的形式出现，以便将信息发送给服务器。这种请求方法适用于获取数据，而不是修改数据，因此它通常用于查询操作，如获取网页内容、图片、视频等资源。参数暴露在URL中，存在安全隐患。受到URL长度的限制，无法传输大量数据。具有幂等性，多次请求得到的结果是相同的。响应结果可以被浏览器缓存。
需要熟记的知识 七大前后端参数传递类型
不定时分享最优质的网络技术与教程，满满的干货。
07-09 3283
不同的参数传输方式有其各自的优缺点，我们需要根据实际业务场景来选择最合适的方式。查询参数（Query Parameters）：常用于GET请求，可以直接暴露在URL中，方便调试和传递简单参数。但是对于大量参数或者参数包含敏感信息时，不适合使用查询参数传递。请求体参数（Request Body Parameters）：可以传递大量的数据和复杂的结构体数据，适合于POST、PUT、PATCH等请求。但是需要在前后端都进行序列化和反序列化，相对比较复杂。
web后端-请求响应
y_k_j_c的博客
04-14 814
我们之前在Spring写的Java类，因为没有继承任何的接口所以tomcat其实是不识别的，也不能直接运行但是tomcat识别JavaEE的一项规范-Servlet,因为tomcat就相当于一个Servlet容器SpringBoot底层提供了一个DisPatcherServlet类(实现了servlet接口)称为前端控制器我们把接收到的数据(浏览器发送到服务端的)封装到一个HttpServletRequest对象而服务器发送到浏览器的对象封装到HttpServletResponse。
前端如何调用后端接口进行数据交互（极简）
热门推荐
weixin_43005654的博客
03-18 7万+
axios，前后端数据交互，数据渲染，发请求，axjax
常用的前端4种请求方式
weixin_54009596的博客
04-16 3947
1. GET拼接url，POST传递body，get限制字符串长度2. 请求缓存：GET 会被缓存，而post不会，原因是get是url的请求4. 保留浏览器历史记录：GET可以，而POST不能，原因是get的url请求5. 用处：get常用于取回数据，post用于提交数据6. 安全性：post比get安全，是因为post是请求体，不会在url上被劫持！7. 请求参数：querystring是url的一部分get、post都可以带上。
菜鸟后端开发之接口请求方式
LCUANDEMUBAI的博客
11-04 1776
开发过程中的接口都会和请求方式打交道，日常开发说简单就是增删改查，但是想要融会贯通难上加难。请求方式用来面对前后交互，常见的有六种。
网络请求(前端)
最新发布
2403_87587287的博客
01-24 1085
地址处也可以写为 /login ，需要将main.js中配置的地址中/删掉。
一文看懂前后端请求参数传递方式和数据格式以及它们之间的关系
weixin_54079103的博客
07-26 2777
JSON：JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，常用于前后端交互。JSON 格式支持复杂的数据结构，例如对象、数组、字符串、数字和布尔值等。在 JavaScript 中，可以使用JSON.parse()和JSON.stringify()方法来解析和生成 JSON 数据。 URL 编码格式：URL 编码格式是一种将字符串转换为 ASCII 码的可读格式的方法，常用于传递 URL 参数或表单数据。在 URL 编码格式中，特殊字符（例如空格、&、+、/
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值