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

servlet前后端交互

news 2025/6/21 17:42:44

前后端交互目录

servlet流程
servlet请求
JSON格式
实现表格效果
- 完整代码

servlet流程

流程图：
在这里插入图片描述

客户端（浏览器）：
1. 技术栈：使用 jQuery + Ajax 发起异步请求。
2. 请求配置：请求路径：指定目标Servlet的URL。请求方法：GET：用于查询数据，POST：用于增删改操作。参数传递：键值对形式（如{name: “Alice”, age: 25}）。
3. 回调处理：请求成功：通过success回调接收服务端返回的数据，并更新DOM。请求失败：通过error回调处理异常（如网络错误、服务器报错）。
服务端（Tomcat + Servlet）：
1. 请求接收： Tomcat作为Web容器解析HTTP请求，路由到对应的Servlet。 Servlet通过HttpServletRequest对象：
  获取参数：request.getParameter(“name”)，识别方法：重写doGet()或doPost()处理对应请求。
2. 业务逻辑：执行核心业务（如数据验证、计算）。操作数据库：通过JDBC/连接池执行SQL。
3. 响应返回：设置响应类型：response.setContentType(“application/json”)。通过HttpServletResponse输出数据：response.getWriter().print(“{“status”:“success”}”)。
数据库：接收Servlet的SQL指令，执行增删改查操作，返回结果集（如查询数据）或影响行数（如增删改）。

完整流程示例：

用户点击页面按钮触发jQuery的Ajax POST请求，提交表单数据。
Tomcat将请求转发至DataServlet.doPost()。
Servlet解析参数，调用Service层插入数据库。
数据库返回插入成功，Servlet生成JSON响应{“code”:200, “msg”:“新增成功”}。
Ajax的success回调解析JSON，提示用户“操作成功”。

servlet请求

有 url 和 type 就可以发起请求，如图：

在这里插入图片描述

url 请求路径 对应的是后端的服务生，WebContent是项目的根目录，根目录下可以直接访问对应的服务生
get 请求一般用于查找，post 请求一般用于增删改

下面进行如下操作：

在这里插入图片描述

参数域：data:{ }
请求当中所有的信息都在 request 中，后端接收参数用到的是 request.getParameter()，接收的参数都是String类型的数据，即使前端传的是数值型数据也会被转成String类型

此时可添加判断账户密码是否正确的操作（其中 equals 表示判断两个字符串是否相等，若相等为true）：

	if(acc.equals("admin")&&pass.equals("123456")) {System.out.println("登陆成功");}else {System.out.println("登陆失败");}

后端给前端的返回信息都在 response 中，返回信息用到的是 response.getWriter().write() 方法，返回的信息仍为字符串类型。
请求成功（无论返回时登陆成功还是登陆失败，只要闭环的执行没有报错都是请求成功）的回调函数 success:function(value){ }，返回的数据返回到形参value中

    success:function(value){console.log(value)},error:function(){alert("出错啦")}

那么我们来验证一下：

在这里插入图片描述

打印的是"ok"，没问题

但是当后端输入：

response.getWriter().write("登陆成功");

此时输出：
在这里插入图片描述

中文不识别出现乱码，返回信息 response.getWriter().write() 相当于其他程序的return功能，后面就不执行了，所以设置编码格式需要在此代码之前，设置返回与接收的编码格式为 utf-8

        response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");

JSON格式

再一个问题，当要返回大量信息时，此时该如何输出呢，若人工分割字符串的话作量太大不现实
我们使用 JSON格式，JSON 是存储和交换文本信息的语法

当有数据时我们将其写成JSON格式：

在这里插入图片描述

但是此时打印出的是字符串
在这里插入图片描述

那么我们加一行代码：

response.setContentType("text/json;charset=utf-8");

这样就会将其按照 JSON 格式解析，打印结果如下：

在这里插入图片描述

后续可以直接对其进行操作

实现表格效果

代码截图如下（后面附有完整代码）：

在这里插入图片描述

效果：

在这里插入图片描述

完整代码

前端完整代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery.js"></script>
<script>$(function(){$.ajax({url:"IndexServlet",  //请求路径type:"get",   //请求方式 get postdata:{account:"admin",password:"123456"},  //参数域success:function(value){console.log(value)for(var i=0;i<value.length;i++){$("tbody").append("<tr>"+"<td>"+value[i].id+"</td>"+"<td>"+value[i].name+"</td>"+"<td>"+value[i].sex+"</td>"+"<td>"+value[i].age+"</td>"+"</tr>")}},  //请求成功的回调函数error:function(){alert("出错啦")}  //请求失败的回调函数})})
</script>
</head>
<body><table border="1"><thead><tr><td>id</td><td>name</td><td>sex</td><td>age</td></tr></thead><tbody><!--<tr><td>id</td><td>name</td><td>sex</td><td>age</td></tr> --></tbody></table>
</body>
</html>

后端完整代码：

package com.qcby.servlet;import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;/*** Servlet implementation class IndexServlet*/
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {private static final long serialVersionUID = 1L;/*** @see HttpServlet#HttpServlet()*/public IndexServlet() {super();// TODO Auto-generated constructor stub}/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("get请求收到了");String acc = request.getParameter("account");String pass = request.getParameter("password");if(acc.equals("admin")&&pass.equals("123456")) {System.out.println("登陆成功");}else {System.out.println("登陆失败");}response.setCharacterEncoding("utf-8");request.setCharacterEncoding("utf-8");response.setContentType("text/json;charset=utf-8");response.getWriter().write("[\r\n" + "    {\r\n" + "        \"id\": 1,\r\n" + "        \"name\": \"李华\",\r\n" + "        \"sex\": \"男\",\r\n" + "        \"age\": 21\r\n" + "    },\r\n" + "    {\r\n" + "        \"id\": 2,\r\n" + "        \"name\": \"小美\",\r\n" + "        \"sex\": \"女\",\r\n" + "        \"age\": 20\r\n" + "    },\r\n" + "    {\r\n" + "        \"id\": 3,\r\n" + "        \"name\": \"小帅\",\r\n" + "        \"sex\": \"男\",\r\n" + "        \"age\": 22\r\n" + "    },\r\n" + "    {\r\n" + "        \"id\": 4,\r\n" + "        \"name\": \"张大\",\r\n" + "        \"sex\": \"男\",\r\n" + "        \"age\": 24\r\n" + "    }\r\n" + "]");}/*** @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)*/protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("post请求收到了");}
}