使用带有 JSON 对象作为数据的 $.ajax 时，request.getParameter() 返回 null

Question

我正在学习 Java servlet，我为“GET”和“POST”编写了两个单独的 servlet。当“GET”请求发送到服务器时，servlet 访问数据库并检索所有内容并将结果转换为 Google Charts 可以识别的格式。当“POST”请求发送到服务器时，servlet 获取参数并将它们添加到 Java 对象中，然后 DAO 将数据添加到数据库中。但是，当我在输入后点击“添加”按钮时，Web 应用程序根本找不到 servlet。它只是简单地“跳过”ajax 函数并继续。所以这是执行插入的 servlet：

@WebServlet("/InsertServlet")
public class InsertServlet extends HttpServlet 
{
    private static final long serialVersionUID = 1L;
    private EmployeeDao dao;

    public InsertServlet() throws SQLException 
    {
        super();
        dao = new EmployeeDao();
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) 
            throws ServletException, IOException 
    {
        System.out.println("doPost");
        Employee e = new Employee();
        e.setName(request.getParameter("name"));
        e.setSSN(request.getParameter("ssn"));
        e.setDob(request.getParameter("birth"));
        e.setIncome(request.getParameter("xxxx"));

        dao.addEmployee(e);

        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println("<h2>Data Entry Added</h2><br>");
        out.println("<h2>"+request.getParameter("name")+"</h2>");
        out.println("<h2>"+request.getParameter("ssn")+"</h2>");
        out.println("<h2>"+request.getParameter("birth")+"</h2>");
        out.println("<h2>"+request.getParameter("xxxx")+"</h2>");
        out.flush();
        out.close();


    }
}

这是 index.html：

<form id="inputForm">
<table style="width:80%;border:3px;">
    <tr>
        <td align="center"><input type="text" name="name" id="name" placeholder="First Last"></td>
        <td align="center"><input type="text" name="ssn" id="ssn" placeholder="111111111"></td>
        <td align="center"><input type="text" name="birth" id="birth" placeholder="MM/DD/YYYY"></td>
        <td align="center"><input type="text" name="xxxx" id="xxxx" placeholder="12345"></td>
        <td align="center"><button type="button" name="add" id="add" >Add</button></td>
        <td align="center"><button type="button" name="delete" id="delete">Delete</button></td>
    </tr>
</table>
</form>
$("#add").click(function() {
            var nameIn = $('#name').val();
            var ssnIn = $('#ssn').val();
            var birthIn = $('#birth').val();
            var xxxxIn = $('#xxxx').val();
            if (validate(nameIn, ssnIn, birthIn, xxxxIn) === true) {
                xxxxIn = "\$" + xxxxIn;
                var ssn1 = ssnIn.substring(0, 3);
                var ssn2 = ssnIn.substring(3, 5);
                var ssn3 = ssnIn.substring(5);
                ssnIn = ssn1 + '-' + ssn2 + '-' + ssn3;

                $.post("InsertServlet", $("#inputForm").serialize(), function(responseHtml) {
                    $('#state').html(responseHtml);
                });
                window.setTimeout(redraw, 1000);
                redraw();
            }
        });

编辑 1：因此 Web 应用程序一直运行到“add”的 $ajax 发送正确请求的地步。 JS 函数运行良好。请求具有与属性对应的正确值。但是，在调用 /InsertServlet URL 时，Web 应用程序似乎只是忽略了 servlet，并且 getParameter 方法在 doPost 方法中都返回 null。

编辑 2：Tomcat 版本：7.0.61。 JDK版本：1.7.0_45。 Servlet 版本：3.0

Answer 1

您的错误在于$.ajax() 选项的dataType 和data 属性：

  $.ajax({
        type:"POST",
        url:"InsertServlet",
        dataType:"json",
        data: {
            name: nameIn, 
            ssn: ssnIn, 
            birth: birthIn, 
            xxxx: xxxxIn
        },
        // ...

根据the $.ajax() documentation，dataType 属性指示 jQuery 以什么格式返回 response（在您的情况下，就像text/html 所指示的 HTML 一样，绝对是不是 application/json 所指示的 JSON）。它并不代表您错误预期的请求参数的格式。而且，data 属性必须表示 URL 编码的 HTTP 请求查询字符串符合 application/x-www-form-urlencoded 内容类型，因此不是 JSON 对象。

这就解释了为什么请求参数是null。

删除dataType 属性。你在这里不需要它，jQuery 足够聪明，可以根据响应的Content-Type 标头自动检测它。

将 data 属性修复为真正的 URL 编码的 HTTP 请求查询字符串。您可以通过以下任一方式进行操作：

1. 在表单上使用$.serialize()。给定一个<form id="yourFormId">：

   data: $("#yourFormId").serialize(),
   

2. 在 JSON 对象上使用 $.param()：

   data: $.param({
           name: nameIn, 
           ssn: ssnIn, 
           birth: birthIn, 
           xxxx: xxxxIn
       }),
   

3. 手动编写 URL 编码的 HTTP 请求查询字符串。

   data: "name=" + encodeURIComponent(nameIn) 
      + "&ssn=" + encodeURIComponent(ssnIn)
      + "&birth=" + encodeURIComponent(birthIn)
      + "&xxxx=" + encodeURIComponent(xxxxIn),
   

4. 使用JSON.stringify() 以及适当的内容类型。

   contentType: "application/json",
   data: JSON.stringify({
           name: nameIn, 
           ssn: ssnIn, 
           birth: birthIn, 
           xxxx: xxxxIn
       }),
   

   这只需要更改 servlet：它必须将请求正文解析为 JSON，而不是使用 getParameter() 等。由于这很乏味，您最好将 servlet 替换为 JAX-RS Web 服务，该服务提供内置工具来透明地处理此问题。

---

与具体问题无关，使用$.post() 而不是$.ajax() 会减少样板代码。

$.post("InsertServlet", $("#yourFormId").serialize(), function(responseHtml) {
    $('#state').html(responseHtml); 
});

另见：

• How to use Servlets and Ajax?