前后端交互常见的几种数据传输格式

目录

[1. get请求 query string](#1. get请求 query string)

2.form表单+get请求

3..form表单+post请求

4..json格式

5.总结


1. get请求 query string

前端通过get请求携带 query string(键值对) ,后端通过req.getParameter(key)方法获取数据。如果key不存在,获取到的就是null。querystring 会被 Tomcat 处理成形如Map这样的结构,就可以通过key获取value了。这种是直接在地址栏里输入querystring: ?username=lisi&password=123。

java 复制代码
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("username="+username+" password="+password);
    }

2.form表单+get请求

和上面差不多,一个是以get方式在地址栏手写querystring,这个是通过form表单构造get请求,同样也是在传querystring。可以看到get请求会将数据显示在地址栏上。

后端

java 复制代码
@WebServlet("/test")
public class test extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("我是响应数据");
    }
}

前端

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="test" method="get">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit">
    </form>
</body>
</html>

后端通过前端name属性所对应的字符串获取到输入的数据。

通过fiddler抓包可以看到get请求请求的数据被拼接到了URL后面,后端我通过resp.getWriter().writer()进行响应,响应数据是在body中被传回来的。


3..form表单+post请 求

请求在body中被传过去,不会显示在地址栏上。同样使用getParameter方法可以获取到value。通过前端name属性所对应的字符串获取到输入的数据。

后端

java 复制代码
@WebServlet("/test")
public class test extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        resp.setContentType("text/html;charset=utf8");
        resp.getWriter().write("我是响应数据");
    }
}

前端

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="test" method="post">
        <input type="text" name="username">
        <input type="text" name="password">
        <input type="submit">
    </form>
</body>
</html>

通过抓包可以看到,post请求的数据不会被拼接到URL后面,而是通过存在在body中传过去的。

响应数据还是在body中传回来的。这就是人们所说的post请求安全,get请求不安全。


4..json格式

json是一种键值对结构的数据格式。通过请求的body中传过去。

格式:

{

username: lisi,

password: 123

}

或嵌套:

{

{

username: zhangsan,

password: 666

}

{

username: lihiai,

password: 456

}

}

使用它我们需要引入jackson这样的第三方库。在maven中央仓库中搜索jackson。

或直接在你的项目的pom.xml中加入下面这段代码,再刷新即可:

java 复制代码
<!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.14.2</version>
        </dependency>
java 复制代码
public class test extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ObjectMapper mapper = new ObjectMapper();
        
        /*第一种处理方式*/
        // 是把请求中的数据转成对象
        Users users1 = mapper.readValue(req.getInputStream(), Users.class);
        // 1.通过第一个参数先从body中以字节为单位读取出json格式的字符串
        // 2.通过第二个参数 创建Users实例
        // 3.解析json格式的字符串 并转换成map键值对结构
        // 4.对map的key进行遍历与实例的属性名进行匹配 匹配成功后就会把map的value赋值给该实例的属性。
        // 5.返回该实例
        
        /*第二种处理方式*/
        // 是返回该对象的json格式的字符串
        // 这个新构造的users是空的 实际中是获取到已有的
        Users users = new Users();
        String respJson = mapper.writeValueAsString(users);
        resp.setContentType("application/json;charset=utf8");
        resp.getWriter().write(respJson);

    }
}

5.总结

前端通过form表单将请求提交到tomcat服务器,Tomcat接收到请求之后,解析该请求,会把这个请求的方法,URL,版本号,各种header,body啥的都解析出来,构造成req对象(这里面就存着该请求的相关数据,通过它里面的已有的各种方法可以获取到)和resp象。 Tomcat通过请求中的url和请求方法选择并调用我们自己写的继承自HttpServlet的类的doPost方法或doGet方法等等,我们需要重写方法。最后通过resp对象包装响应数据数据返回给Tomcat,tomcat发送给浏览器。

相关推荐
大侠归来2 分钟前
C++ 与 Lua 的协程交互:从原理到实战
c++·lua·交互
元岳数字人小元16 小时前
数字人源码系统:模块化开发赋能智能场景灵活迭代升级
运维·人工智能·开源·人机交互·交互
李游Leo19 小时前
《HarmonyOS 7 ArkGraphics 3D 空间设计开发实战》05:Camera控制、手势映射与空间浏览交互【鸿蒙心迹】
3d·交互·harmonyos
沫璃染墨19 小时前
《Qt从零入门系列(十一):Qt事件机制详解——从QEvent到鼠标、键盘与定时器事件》
c++·qt·ui·硬件工程·交互·个人开发·qt5
像风一样自由20201 天前
42.VueReactNextjs如何为AI应用设计前端交互
前端·人工智能·大模型·交互·rag·智能体
Dream-Y.ocean1 天前
懂你的情绪,记得你在意的事 - 知暖如何用端到端具身交互智能重构 AI 情感陪伴
人工智能·重构·交互
元岳数字人小元8 天前
无惧网络受限:数字人私有化部署打造离线全域服务能力
运维·人工智能·开源·人机交互·交互
兰亭妙微UI设计公司9 天前
兰亭妙微UI设计公司分享:EQUA 智能健康生态系统 UI/UX 设计深度解析
ui·交互
hhzz13 天前
OpenCV 入门到精通 09】特征检测与匹配:从 Harris 到 ORB 图像配准
人工智能·opencv·计算机视觉·开源·交互
兰亭妙微UI设计公司14 天前
兰亭妙微APP界面设计公司分享: iPhone Duo 登场|3 大核心要点,拆解折叠屏 UI 适配设计思路
ui·交互