Servlet实现前后端交互

【JavaWeb笔记】Servlet实现前后端交互：表单提交与Ajax异步请求

今天跟着老师学习了JavaWeb中Servlet实现前后端交互的核心内容，主要掌握了「表单同步提交」和「Ajax异步提交」两种方式，整理成笔记方便后续回顾～

一、前置知识铺垫

1. 核心概念

Servlet：JavaWeb处理前端请求的核心组件，通过@WebServlet注解映射请求路径，重写doGet()/doPost()方法处理对应请求方式的请求。
前后端交互本质：前端传递参数 → 后端接收并处理 → 后端返回数据 → 前端展示数据。
环境说明：本次案例的Web项目名为0203ServletTest，Ajax依赖JQuery（通过CDN引入），服务器为Tomcat。

2. 请求方式说明

GET：参数拼接在URL中，适合简单、非敏感数据传递（本次案例均用GET，POST原理类似）；
POST：参数放在请求体中，更安全，适合敏感数据（如密码）传递。

二、方式一：表单同步提交（基础版）

1. 实现逻辑

通过HTML的<form>标签实现同步提交，点击「提交」按钮后页面会跳转，后端接收参数并处理（本次案例仅打印参数）。

2. 代码解析

前端：index.html（表单页面）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单提交</title>
</head>
<body>
    <!-- action：请求提交地址（项目名+Servlet映射路径）；method：请求方式（get对应doGet） -->
    <form action="/0203ServletTest/i" method="get">
        姓名：<input type="text" name="name"><br/>
        密码：<input type="password" name="password"><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>

关键要点：

<input>的name属性是后端接收参数的「唯一标识」，必须和后端req.getParameter()的参数名一致；
action路径格式：/项目名/Servlet映射路径（Servlet映射路径由@WebServlet注解指定）。

后端：IndexServlet.java（处理表单请求）

java 复制代码

package com.qcby;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

// 映射路径：/i（前端action的路径最后部分要匹配）
@WebServlet("/i")
public class IndexServlet extends HttpServlet {
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 接收前端传递的name和password参数（和前端input的name一致）
        String name = req.getParameter("name");
        String password = req.getParameter("password");
        // 控制台打印参数，验证是否接收成功
        System.out.println(name+":"+password);
    }
}

3. 运行效果

点击「提交」按钮后，页面会跳转，后端控制台能打印出前端输入的姓名和密码。
缺点：同步提交会刷新/跳转页面，用户体验一般，适合简单的一次性提交场景。

三、方式二：Ajax异步提交（进阶版）

1. 实现逻辑

通过JQuery封装的Ajax实现「无刷新提交」，前端发送请求后页面不跳转，后端返回JSON数据，前端接收后局部渲染页面（本次案例渲染表格）。

2. 代码解析

前端：first.html（Ajax请求页面）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax提交</title>
    <!-- 引入JQuery CDN，用于简化Ajax操作 -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    用户名<input type="text" id="username" placeholder="请输入用户名">
    密码<input type="password" id="password" placeholder="请输入密码">
    <button id="btn" onclick="get()">登录</button>
    <div id="test">数据展示</div>
</body>
<script>
    function get(){
        // 1. 获取输入框的值（通过JQuery的id选择器）
        var username = $("#username").val();
        var password = $("#password").val();
        // 2. 拼接请求参数（JSON格式）
        var data = {
            "username":username,
            "password":password
        }
        // 3. 发送Ajax请求
        $.ajax({
            url:"/0203ServletTest/first", // 请求地址（项目名+Servlet映射路径）
            type:"get", // 请求方式
            dataType:"json", // 预期后端返回的数据类型（JSON）
            data:data, // 要传递的参数
            success:function(res){ // 请求成功的回调函数（res是后端返回的JSON数据）
                console.log(res);
                showData(res); // 渲染数据到页面
            }
        });
    }
    // 渲染JSON数据为表格
    function showData(res){
        var html = "<table border='1px'>";
        // 表头
        html+="<tr><td>类别</td><td>长度</td></tr>";
        // 表体（遍历JSON数组）
        for(var i=0;i<res.length;i++){
            html+="<tr><td>"+res[i].type+"</td><td>"+res[i].length+"</td></tr>";
        }
        html+="</table>";
        // 清空容器并渲染表格
        $("#test").empty().append(html);
    }
</script>
</html>

关键要点：

必须先引入JQuery才能使用$.ajax()；
dataType: "json"表示前端预期接收JSON格式，后端必须对应返回JSON；
success回调函数处理后端响应，实现「局部渲染」（只更新表格区域，页面不跳转）。

后端：MyFirstServlet.java（处理Ajax请求）

java 复制代码

package com.qcby;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

// 映射路径：/first（前端Ajax的url最后部分要匹配）
@WebServlet("/first")
public class MyFirstServlet  extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1. 接收前端Ajax传递的参数
        String username  = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username:"+username+" password:"+password);

        // 2. 构造JSON格式的响应数据（模拟业务数据）
        String data1 = "[{\n" +
                "\t\"type\": \"abnomaly\",\n" +
                "\t\"length\": \"18\"\n" +
                "},\n" +
                "\t{\n" +
                "\t\"type\": \"abnomaly\",\n" +
                "\t\"length\": \"22\"\n" +
                "}, {\n" +
                "\t\"type\": \"normal\",\n" +
                "\t\"length\": \"20\"\n" +
                "}\n]";

        // 3. 设置响应编码和格式（关键！避免乱码+确保前端解析JSON）
        resp.setCharacterEncoding("UTF-8");
        resp.setContentType("application/json;charset=UTF-8");
        // 4. 返回JSON数据给前端
        resp.getWriter().append(data1);
    }
}

关键要点：

必须设置resp.setContentType("application/json;charset=UTF-8")：告诉前端返回的是JSON格式，且编码为UTF-8；
手动拼接JSON字符串仅用于演示，实际开发推荐用FastJSON/Jackson等工具将Java对象转为JSON。

四、核心对比与总结

1. 两种提交方式对比

特性	表单同步提交	Ajax异步提交
页面状态	刷新/跳转	无刷新（局部更新）
用户体验	一般	优秀
数据渲染	依赖后端渲染	前端自主渲染
适用场景	简单提交（如登录跳转）	局部刷新（如列表加载、表单验证）

2. 通用注意事项

路径匹配 ：前端请求路径（action/url）必须是/项目名/Servlet映射路径，否则会报404；
参数名一致 ：前端传递的参数名（name属性/Ajax的data键名）必须和后端req.getParameter()的参数名一致，否则接收不到参数；
编码统一：前后端都要设置UTF-8编码，避免中文乱码；
JSON格式规范：后端返回的JSON字符串必须语法正确，否则前端解析失败。

3. 拓展思考

实际开发中优先用POST请求（参数不暴露在URL），只需把前端method/type改为post，后端重写doPost()方法；
后端手动拼接JSON易出错，可引入FastJSON依赖，直接将List/Map转为JSON；
Ajax可增加error回调，处理请求失败的情况（如网络异常、后端报错）。

五、总结

本次学习的两种方式是Servlet前后端交互的基础：表单提交适合简单场景，Ajax异步提交是现代Web开发的主流（无刷新、体验好）。核心是理解「请求路径匹配」「参数传递」「响应格式设置」这三个关键点，后续可以继续学习POST请求、异常处理、数据校验等进阶内容～