Java表单提交JSON数据失败，请求协助排查修正代码

我帮你梳理下代码里的问题，主要集中在前端AJAX请求的格式、依赖顺序以及后端Servlet接收JSON数据的方式上，下面一步步给你修正：

前端JSP代码的问题与修正 #

1. jQuery依赖顺序错误：必须先引入jQuery核心库，再引入依赖它的jquery.serializejson.js，否则插件无法生效。
2. 表单选择器错误：AJAX里用了$("#myformid")，但你的表单id是frmRegStudent，选择器不匹配。
3. 未正确发送JSON格式数据：当前用serialize()生成的是URL编码格式，要发送JSON需要用serializeJSON()（依赖你引入的插件），同时设置contentType: "application/json"。
4. success回调无跳转逻辑：你写的"/registerSuccessfully.jsp"只是字符串，需要用window.location.href实现页面跳转。
5. 表单action路径有空格："/student /studentRegister"里的空格会导致请求路径错误，应该改成"/student/studentRegister"。
6. 邮箱输入框错误限制：邮箱输入框加了onkeypress="return isNumber(event)"，导致只能输入数字，完全不符合邮箱格式，需要移除这个事件。
7. 提交按钮class语法错误：btn btn- success里的空格应该去掉，改成btn btn-success。

修正后的前端代码：

<%@include file="header.jsp" %> 
<script src="resources/js/jquery-1.10.2.min.js"></script>
<script src="resources/js/jquery.serializejson.js"></script>
<script>
$(document).ready(function() {
    $("#frmRegStudent").on('submit', function(e) {
        e.preventDefault(); // 替代return false，更标准
        $.ajax({
            url: "/student/studentRegister", // 明确指定url，也可以用this.action
            type: "POST",
            dataType: "json",
            contentType: "application/json", // 告诉后端发送的是JSON
            data: JSON.stringify($("#frmRegStudent").serializeJSON()), // 转成JSON字符串
            success: function() {
                window.location.href = "/registerSuccessfully.jsp"; // 跳转成功页面
            },
            error: function(xhr, status, error) {
                console.error("请求失败:", error); // 增加错误日志，方便调试
            }
        });
    });
});
</script>
<script type="text/javascript">
function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if ((charCode > 31 && charCode < 48) || charCode > 57) {
        return false;
    }
    return true;
}
</script>
<div class="container">
    <div class="page-header">
        <h1>Register Student</h1>
        <p class="lead">Please fill in your information below</p>
    </div>
    <form id="frmRegStudent" name="frmRegStudent" action="/student/studentRegister" method="post" data-toggle="validator" role="form">
        <div class="form-group has-feedback">
            <label for="studentCode">studentCode</label>
            <input type="text" onkeypress="return isNumber(event)" id="studentCode" name="studentCode" class="form-control" data-error="please fill studentCode" required/>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <span class="help-block with-errors"></span>
        </div>
        <div class="form-group has-feedback">
            <label for="firstname">Name</label>
            <input type="text" id="firstname" name="firstname" class="form-control" data-error="please fill name" required/>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <span class="help-block with-errors"></span>
        </div>
        <div class="form-group has-feedback">
            <label for="lastname">Family</label>
            <input type="text" id="lastname" name="lastname" class="form-control" data-error="please fill lastName" required/>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <span class="help-block with-errors"></span>
        </div>
        <div class="form-group has-feedback">
            <label for="phone">phone</label>
            <input type="text" onkeypress="return isNumber(event)" id="phone" name="phone" class="form-control" data-error="please fill phone" required/>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <span class="help-block with-errors"></span>
        </div>
        <div class="form-group has-feedback">
            <label for="email">email</label>
            <input type="email" id="email" name="email" class="form-control" data-error="please fill email" required/> <!-- 改成type="email"更规范 -->
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <span class="help-block with-errors"></span>
        </div>
        <input type="submit" id="Register" value="Register" class="btn btn-success"/>
    </form>
</div>
<%@include file="footer.jsp" %>

后端StudentServlet的问题与修正 #

1. doPost方法无法接收JSON数据：当前端发送JSON格式时，不能用req.getParameter("data")获取，需要从请求的输入流中读取JSON字符串。
2. 缺少响应设置：处理完请求后，应该给前端返回成功状态，设置响应的contentType为JSON格式。
3. 异常处理缺失：增加异常捕获，避免JSON解析错误导致程序崩溃。

修正后的Servlet代码：

import com.fasterxml.jackson.databind.ObjectMapper;
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.BufferedReader;
import java.io.IOException;
import java.io.PrintWriter;

@WebServlet("/student/studentRegister") // 确保路径和前端请求一致
public class StudentServlet extends HttpServlet {
    StudentServiceInter service = new StudentServiceImpl();
    ObjectMapper mapper = new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        try {
            int id = Integer.parseInt(req.getParameter("id")); // 这里参数名改成id更合理
            Student student = service.findOne(id);
            String json = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(student);
            out.print(json);
        } catch (NumberFormatException e) {
            out.print("{\"error\":\"Invalid student ID\"}");
            resp.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        // 从输入流读取JSON数据
        BufferedReader reader = req.getReader();
        StringBuilder sb = new StringBuilder();
        String line;
        while ((line = reader.readLine()) != null) {
            sb.append(line);
        }
        String json = sb.toString();
        try {
            Student student = mapper.readValue(json, Student.class);
            service.saveOrupdate(student);
            out.print("{\"status\":\"success\",\"message\":\"Student registered successfully\"}");
            resp.setStatus(HttpServletResponse.SC_OK);
        } catch (Exception e) {
            out.print("{\"status\":\"error\",\"message\":\"Failed to register student: " + e.getMessage() + "\"}");
            resp.setStatus(HttpServletResponse.SC_INTERNAL_SERVER_ERROR);
        }
    }

    @Override
    protected void doPut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        // 同理，PUT请求如果是JSON，也要从输入流读取
        out.print("{\"status\":\"success\",\"message\":\"edited successfully\"}");
        resp.setStatus(HttpServletResponse.SC_OK);
    }

    @Override
    protected void doDelete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("application/json;charset=UTF-8");
        PrintWriter out = resp.getWriter();
        try {
            int id = Integer.parseInt(req.getParameter("id"));
            service.delete(id);
            out.print("{\"status\":\"success\",\"message\":\"deleted successfully\"}");
            resp.setStatus(HttpServletResponse.SC_OK);
        } catch (NumberFormatException e) {
            out.print("{\"error\":\"Invalid student ID\"}");
            resp.setStatus(HttpServletResponse.SC_BAD_REQUEST);
        }
    }
}

额外注意点 #

• 确保你的Student类有正确的getter/setter方法，否则Jackson无法正确解析JSON。
• 检查项目中是否正确引入了Jackson的相关依赖（jackson-databind等），否则会出现JSON解析异常。
• 可以在浏览器的开发者工具（F12）的Network标签里查看AJAX请求的状态和参数，方便调试。

内容的提问来源于stack exchange，提问作者reihane