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