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

前端发送请求格式

news 2024/10/25 1:05:55

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 {@PostMappingpublic 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 {@GetMappingpublic 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 {@PostMappingpublic 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;}@Overridepublic 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 = 1await 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：


http://www.mrgr.cn/news/57994.html

相关文章：

  • 《首尔破笑组：在欢笑中触摸生活的温度》
  • java和嵌入式现在哪个好?
  • 噪音低的宠物空气净化器应该怎么挑？有没有哪些值得推荐的
  • 【Linux】 su 和 sudo 的区别剖析
  • Excel自带傅里叶分析数据处理——归一化处理
  • three.js 使用geojson ，实现中国地图区域，边缘流动效果
  • 1024——视触觉传感器GelSight的前世今生
  • 系统移植相关概念总结
  • 力扣周赛第420场 中等 3325.字符至少出现k次的子字符串 I
  • C语言程序设计：现代设计方法习题笔记《chapter4》
  • java的maven打包插件来了，package一键打包exe、dmg、rpm等
  • JAVA应用测试，线上故障排查分析全套路！
  • C++，STL 045（24.10.24）
  • 【Linux】进程状态及其转换
  • Github_以太网开源项目verilog-ethernet代码阅读与移植(八)——移植工程分享
  • 头歌——人工智能（遗传算法）
  • 获取图像的风格矩阵
  • 现场总是发生急停，很可能是PLC和设置间网络中断
  • make_blobs函数
  • Django+Vue全栈开发旅游网项目首页
  • python实战（二）——房屋价格回归建模
  • 九、Linux实战案例：项目部署全流程深度解析
  • 【C++笔记】类和对象（下）
  • Java中的集合-Map和set(java数据结构)
  • 【SpringCloud】基础问题
  • 力扣每日一题3185. 构成整天的下标对数目 II