servlet前后端交互

发布于：2025-06-21 ⋅ 阅读:(21) ⋅ 点赞:(0)

前后端交互目录

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指令，执行增删改查操作，返回结果集（如查询数据）或影响行数（如增删改）。

完整流程示例：

  1. 用户点击页面按钮触发jQuery的Ajax POST请求，提交表单数据。
  2. Tomcat将请求转发至DataServlet.doPost()。
  3. Servlet解析参数，调用Service层插入数据库。
  4. 数据库返回插入成功，Servlet生成JSON响应{“code”:200, “msg”:“新增成功”}。
  5. 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 post
			data:{
				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请求收到了");
	}
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布