邢台市建设局网站,企业网站建设售后服务内容,注册10万公司实缴多少钱,php 资讯网站在与前端对接过程中一直都会遇到一个问题#xff0c;就是我们后端接口提供好了#xff0c;自测也通过了#xff0c;前端却说接口不通#xff0c;当我们去排查时却发现大都不是接口不通#xff0c;很多情况是前端使用的姿势不对#xff0c;比如接口明明写的参数是放到ULR路… 在与前端对接过程中一直都会遇到一个问题就是我们后端接口提供好了自测也通过了前端却说接口不通当我们去排查时却发现大都不是接口不通很多情况是前端使用的姿势不对比如接口明明写的参数是放到ULR路径上前端却传到了queryString上接口明明写的是使用application/x-www-form-urlencoded格式前端却传了application/json格式所以本文总结常用的前后端传参数据格式方便前端与后端开发人员更好的理解HTTP接口协议传参格式。一、通过HTTP URL传参数
这种方式是最简单也是最常用的传参方式通常用于前端从后端获取数据通过URL传参分为两种一种是将参数放在URL路径上另一种是将参数放在QueryString上也就是URL的?后面
HTTP报文格式GET /user/1?userNameadminarraysa,b,c,dids1ids2ids3ids4注意事项1.路径 /user/1 上的1是通过URL路径传参数这种RestFul风格的传参方式有些前端会搞错 2.userNameadmin 这种就是简单的QueryString传参,是最常见的一般不会搞错 3.arraysa,b,c,d 这种是通过QueryString传数组其实就是使用,分隔4.ids1ids2ids3ids4这种也是传数组参数的一种方式一般用的比较少容易出错
后端接口代码
我们使用SpringMVC框架编写接口可以通过PathVariable和RequestParam两个注解来接收上面参数主要有三种方法 1.第一种是在方法上一个一个的来接收参数 2.第二种是使用MapString,Object接收来参数 3.第三种是封装个UserDTO对象来接收。
GetMapping(/user/{id})public UserDTO request(PathVariable Long id, String userName, String[] arrays,RequestParam ListLong ids) {return UserDTO.builder().id(id).build();}GetMapping(/user2/{id})public MapString,Object user2(PathVariable Long id,RequestParam MapString,Object map) {return map;}GetMapping(/user3/{id})public UserDTO user3(PathVariable Long id, UserDTO user) {return user;}Datapublic class UserDTO {private Long id;private String userName;private String[] arrays;private ListLong ids;}注意事项 1.接收数组参数时可以使用String[]和List两种数据类型; 2.使用MapString,Object map接收参数时 Value的类型要是Object类型,并且要增加RequestParam 3.使用User对象接收参数时不要增加RequestParam注解
前端调用接口代码
前端对于这种传参数方式直接把所有参数拼接到URL上就好了
var request new XMLHttpRequest();request.open(GET, http://localhost/user/1?userNameadminarraysa,b,c,dids1ids2ids3ids4, true);request.responseType json;request.onload function () {var data this.response;console.log(data);};request.send();注意事项
1.如果传的参数不是URL安全的需要进行URLEncode 2.POST、PUT、DELETE方法也是支持通过URL传参的 3.使用这种URL拼接不同浏览器支持的最大参数长度是不一样的以下是不同浏览器支持参数的最大长度
浏览器 URL长度限制 IE浏览器 2048字节 360极速浏览器 65536字节 Firefox(Browser) 2118字节 Safari(Browser) 80000字节 Opera(Browser) 190000字节 Google(chrome) 8182字节
二、通过HTTP Body传参数
通过HTTP Body传参数主要用于前端向服务端提交数据如添加数据、修改数据、上传文件等等通过Body传参常用的数据格式主要有以下3种1.application/x-www-form-urlencoded 也就是表单提交body报文中使用keyvalue拼接参数; 2.application/json 将数据转成JSON格式放在Body中 3.multipart/form-data 用于文件上传。
HTTP报文格式
application/x-www-form-urlencoded格式报文
POST /user3/1
Content-Type: application/x-www-form-urlencodeduserNameadminarraysa,b,c,dids1ids2ids3ids4application/json格式报文
GET /user4/1 Content-Type: application/json
{id: 1,userName: admin,arrays: [a,b,c,d],ids: [1,2,3,4]
}注意事项 GET方法也可以通过Body传参数,这点很多人会觉得GET方法不能通过Body传参不过只能传application/json使用过elasticsearch应该知道在搜索数据是就是通过GET方法传JSON数据的。
后端接口代码
在SpringMvc框架中接收Body的application/x-www-form-urlencoded类型参数和在URL的QueryString传参数是通用的接收application/json需要使用RequestBody注解。
RequestMapping(/user3/{id})public UserDTO user3(PathVariable Long id, UserDTO user) {return user;}RequestMapping(/user4/{id})public UserDTO user4(PathVariable Long id,RequestBody UserDTO user) {return user;}RequestMapping(/user5/{id})public UserDTO user4(PathVariable Long id,RequestBody String user) {return JSONUtil.toBean(user,UserDTO.class);}注意事项RequestBody 注解可以直接使用DTO来接收也可以使用String来接收再手动转成DTO这个方法在不知道要接收的数据有哪些字段时非常有用可以将对方传的完整数据打印出来。
前端调用接口代码
function sendFormUrl() {var request new XMLHttpRequest();request.open(POST, http://localhost/user3/1, true);request.responseType json;request.onload function () {console.log(this.response);};var formData new FormData();formData.append(userName, admin);formData.append(arrays, a,b,c,d);formData.append(ids, 1);formData.append(ids, 2);formData.append(ids, 3);formData.append(ids, 4);request.send(formData);}function sendJson() {var request new XMLHttpRequest();request.open(POST, http://localhost/user4/1, true);request.responseType json;request.setRequestHeader(Content-Type, application/json;charsetUTF-8);request.onload function () {console.log(this.response);};var body {userName: admin,arrays: [a,b,c,d],ids: [1,2,3,4]}request.send(JSON.stringify(body));
}注意事项multipart/form-data主要用于文件上传可以参数我的另一篇文章 《一个Demo搞定前后端大文件分片上传、断点续传、秒传》
三、通过Header传参数
通过Header传参主要用于一些通用的用户认证信息比如常用的 Authentication: Bearer 、Cookie等
HTTP报文格式
GET /user7/1 Accept: application/json userName : admin Cookie: userNameadmin; arrays: a,b,c,d ids:1 ids:2 ids:3 ids:4
注意事项
使用SpringMVC请求报java.lang.IllegalArgumentException: The HTTP header line [username : admin] does not conform to RFC 7230. The request has been rejected.因为userName这些自 定义请求头不符合RFC 7230标准所以被拒绝了增加配置 reject-illegal-header: off可解决application.yml中增加
server:port: 80tomcat:reject-illegal-header: off后端接口代码
获取Header参数可以通过request.getHeader(header)依次获取也可以通过CookieValueRequestHeader来获取
RequestMapping(/user6/{id})
public User user6(PathVariable Long id, HttpServletRequest request) {EnumerationString headerNames request.getHeaderNames();while (headerNames.hasMoreElements()){String header headerNames.nextElement();log.info({}-{},header,request.getHeader(header));}return User.builder().id(id).build();
}RequestMapping(/user7/{id})
public User user7(PathVariable Long id, CookieValue String userName, RequestHeader String[] arrays, RequestHeader ListLong ids) {return User.builder().id(id).userName(userName).arrays(arrays).ids(ids).build();
}前端调用接口代码 function sendHeader() {var request new XMLHttpRequest();request.open(GET, http://localhost/user7/1, true);request.responseType json;request.setRequestHeader(arrays,a,b,c,d);request.setRequestHeader(ids,1);request.setRequestHeader(ids,2);request.setRequestHeader(ids,3);request.setRequestHeader(ids,4);request.onload function () {console.log(this.response);};request.send();}注意事项Cookie是浏览器自动添加了不需要通过request.setRequestHeader(“userName”,“admin”)添加
总结 本文总结了前后端通过HTTP接口协议传参的常用方法并从HTTP协议、后端JAVA代码、前端JS代码演示每种参数的报文格式、后端获取方法和前端调用方法当然还有一些更高级的传参方式比如websocket、sse等基于HTTP的实时推送协议没有涉及到。
