尚硅谷尚筹网单一架构知识十一常用请求头类别

最新推荐文章于 2024-10-17 11:21:39 发布

qq_17023977

最新推荐文章于 2024-10-17 11:21:39 发布

阅读量128

点赞数

分类专栏：请求头与数据文章标签： java

本文链接：https://blog.csdn.net/qq_17023977/article/details/105035202

版权

请求头与数据专栏收录该内容

1 篇文章 0 订阅

订阅专栏

※Content-Type进一步说明

：
常用类型1：application/x-www-form-urlencoded
通常是提交一个表单所产生的
在这里插入图片描述
常用类型2：application/json;charset=UTF-8

通常是发送Ajax请求，请求体整个是一个JSON数据

$.ajax({
	"url":"admin/batch/remove.json",	// 服务器端接收请求的URL地址
	"type":"post",	// 设置请求方式为POST
	"contentType":"application/json;charset=UTF-8",	// 设置请求体内容类型，告诉服务器当前请求体发送的是JSON数据
	"data":JSON.stringify(adminIdArray),	// 请求体真正要发送给服务器的数据
	"dataType":"json",		// 把服务器端返回的数据当作JSON格式解析
	"success":function(response) {		// 服务器处理请求成功后执行的函数，响应体以参数形式传入当前函数
		console.log(response);
	
		var result = response.result;
		
		if(result == "SUCCESS") {
			// 跳转页面
			// window.location.href = "admin/query/for/search.html?pageNum="+window.pageNum+"&keyword="+window.keyword;
		}
		
		if(result == "FAILED") {
			alert(response.message);
			return ;
		}
	
	},
	"error":function(response) {	// 服务器处理请求失败后执行的函数，响应体以参数形式传入当前函数
		alert(response.message);
		return ;
	}
});```

这样提交的请求，handler方法接收数据需要使用@RequestBody注解

```java
@ResponseBody
@RequestMapping("/admin/batch/remove")
public ResultEntity<String> batchRemove(@RequestBody List<Integer> adminIdList) {
	
	try {
		
		adminService.batchRemove(adminIdList);
		
		return ResultEntity.successWithoutData();
	}catch(Exception e) {
		
		return ResultEntity.failed(null, e.getMessage());
	}
	
}

常用类型3：multipart/form-data
用于文件上传

2 Ajax

2.1 像提交普通表单一样发送数据
2.1.1 浏览器端代码

$(function(){
	$("button").click(function(){
		
		// 真正作为请求体发送给服务器的数据。
		// 在我们像提交表单一样发送数据时，不把JSON对象转换为JSON字符串
		var requestBody = {
			"empId":999,
			"empName":"harry",
			"empSalary":128.56
		};
		
		$.ajax({
			"url":"ajax/send/form/data",	// 请求的目标地址
			"type":"post",					// 请求方式
			"data":requestBody,				// 请求体数据
			"contentType":"application/x-www-form-urlencoded",	//默认值，可以省略该项
			"dataType":"json",				// 服务器端返回数据的解析方式
			"success":function(response) {			// 服务器处理请求成功，执行这个函数，响应体从参数这里传入
				
				// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
				var result = response.result;
			
				// 如果返回结果成功，显示成功（逻辑成功）
				if("SUCCESS" == result) {
					alert("SUCCESS");
				}
				
				// 如果返回结果失败，显示消息（逻辑失败）
				if("FAILED" == result) {
					
					var message = response.message;
					
					alert(message);
				}
				
			}, 
			
			"error":function(response){			// 处理请求失败，例如：404、500、400等等
				
				alert(response);
				
			}
		});
	});
});

2.1.2 使用开发者工具查看请求体
在这里插入图片描述

2.1.3	handler代码
@ResponseBody
@RequestMapping("/ajax/send/form/data")
public ResultEntity<String> receiveFormData(Employee employee) {
	
	System.out.println(employee);
	
	return ResultEntity.successWithoutData();
}

2.2 整个请求体是一个JSON数据
2.2.1 浏览器端代码

$(function(){
	$("button").click(function(){
		
		// Ajax请求的请求体如果是JSON格式，那么需要先将数据封装为JSON对象
		var jsonObj = [
			{
				"empId":666,
				"empName":"jerry",
				"empSalary":123.321
			},
			{
				"empId":555,
				"empName":"bob",
				"empSalary":456.654
			},
			{
				"empId":444,
				"empName":"kate",
				"empSalary":666.666
			}
		];
		
		// 将JSON对象转换为JSON字符串
		var requestBody = JSON.stringify(jsonObj);
		
		// 发送Ajax请求
		$.ajax({
			"url":"ajax/send/json/data",	// 请求的目标地址
			"type":"post",					// 请求方式
			"data":requestBody,				// 请求体数据
			"contentType":"application/json;charset=UTF-8",	//非默认值，不能省略
			"dataType":"json",				// 服务器端返回数据的解析方式
			"success":function(response) {			// 服务器处理请求成功，执行这个函数，响应体从参数这里传入
				
				// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
				var result = response.result;
			
				// 如果返回结果成功，显示成功（逻辑成功）
				if("SUCCESS" == result) {
					alert("SUCCESS");
				}
				
				// 如果返回结果失败，显示消息（逻辑失败）
				if("FAILED" == result) {
					
					var message = response.message;
					
					alert(message);
				}
				
			}, 
			
			"error":function(response){			// 处理请求失败，例如：404、500、400等等
				
				alert(response);
				
			}
		});
		
	});
});

2.2.2 使用开发者工具查看请求体
在这里插入图片描述

2.2.3	handler代码
@ResponseBody
@RequestMapping("/ajax/send/json/data")
public ResultEntity<String> receiveJsonData(@RequestBody List<Employee> empList) {
	
	for (Employee employee : empList) {
		System.out.println(employee);
	}
	
	return ResultEntity.successWithoutData();
}

2.3 表单提交list数据[反面教材]
2.3.1 浏览器端代码

$(function(){
	$("button").click(function(){
		
		// Ajax请求的请求体如果是JSON格式，那么需要先将数据封装为JSON对象
		var jsonObj = {
			"empList[0].empId":666,
			"empList[0].empName":"jerry",
			"empList[0].empSalary":123.321,
			"empList[1].empId":555,
			"empList[1].empName":"bob",
			"empList[1].empSalary":456.654,
			"empList[2].empId":444,
			"empList[2].empName":"kate",
			"empList[2].empSalary":666.666
		};
		
		// 发送Ajax请求
		$.ajax({
			"url":"ajax/send/form/list/data",	// 请求的目标地址
			"type":"post",					// 请求方式
			"data":jsonObj,				// 请求体数据
			"contentType":"application/x-www-form-urlencoded",	//非默认值，不能省略
			"dataType":"json",				// 服务器端返回数据的解析方式
			"success":function(response) {			// 服务器处理请求成功，执行这个函数，响应体从参数这里传入
				
				// response已经解析为JSON对象，可以直接使用“.属性名”方式访问具体属性
				var result = response.result;
			
				// 如果返回结果成功，显示成功（逻辑成功）
				if("SUCCESS" == result) {
					alert("SUCCESS");
				}
				
				// 如果返回结果失败，显示消息（逻辑失败）
				if("FAILED" == result) {
					
					var message = response.message;
					
					alert(message);
				}
				
			}, 
			
			"error":function(response){			// 处理请求失败，例如：404、500、400等等
				
				alert(response);
				
			}
		});
		
	});
});

2.3.2	EmployeeParam实体类
public class EmployeeParam {
	
	private List<Employee> empList;

	……

2.3.3	handler代码
@ResponseBody
@RequestMapping("/ajax/send/form/list/data")
public ResultEntity<String> receiveFormListData(EmployeeParam employeeParam) {
	
	List<Employee> empList = employeeParam.getEmpList();
	
	for (Employee employee : empList) {
		System.out.println(employee);
	}
	
	return ResultEntity.successWithoutData();
}

2.4 小结
使用JSON格式作为请求体去传送数据，非常适合发送结构复杂的大对象数据。JSON格式和Java类型直接对应，不需要额外封装专门接收请求参数的实体类。
使用时需要注意的点：
 JSON对象需要使用JSON.stringify()转换为JSON字符串
 contentType要设置成application/json;charset=UTF-8
 handler方法接收使用Java类型形参前需要使用@RequestBody注解