servlet前后端交互

前后端交互目錄

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請求收到了");}
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/85442.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/85442.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/85442.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！