无法在不刷新页面的情况下使用 Ajax/JQuery 将表单数据发送到 servlet

Question

我正在尝试使用 Ajax/JQuery 从 Form 向 Servlet 发送一些数据而不刷新页面。下面是我的 JSP 页面。

<%-- 
    Document   : index
    Created on : Feb 23, 2015, 8:18:52 PM
    Author     : Yohan
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
   var form = $('#customItemForm');
  function formSubmit(){

 $.ajax({
     url:'SampleServlet',
     data: $("#customItemForm").serialize(),
     success: function (data) {

    }
});
}
</script>
    </head>
    <body>
        <form method="get" action="SampleServlet" id="customItemForm">
            Name <input type="text" name="name">
        <button onclick="formSubmit()">Submit</button>
        </form>
    </body>
</html>

下面是我的 servlet。

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

/**
 *
 * @author Yohan
 */
public class SampleServlet extends HttpServlet {



    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {

            String str = request.getParameter("name");
            System.out.println(str);
        } finally {
            out.close();
        }
    }


    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        processRequest(request, response);
    }


    @Override
    public String getServletInfo() {
        return "Short description";
    }// </editor-fold>

}

但是我的表单总是被提交给 servlet，离开 JSP 页面。我做错了什么？

Answer 1

据我所知，您只是没有阻止在表单中按下提交按钮的默认操作。如果用户在字段中使用 Enter 按钮发送表单，而不是用鼠标按下按钮，您的代码也将不起作用

尝试使用下一个构造

<form method="get" action="SampleServlet" id="customItemForm"  onsubmit="formSubmit(); return false;">
    Name <input type="text" name="name">
    <button>Submit</button>
</form>

无法在不刷新页面的情况下使用 Ajax/JQuery 将表单数据发送到 servlet

Unable to send form data to servlet using Ajax/JQuery without refreshing the page

html

ajax

jquery

jsp

servlets