使用JQuery和AJAX/-Servlet发送表单并停留在同一页面上

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<form id="myForm">
  <!-- 表单内容 -->
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <button type="submit">提交</button>
</form>

<script>
  $(document).ready(function() {
    $('#myForm').submit(function(event) {
      event.preventDefault(); // 阻止表单的默认提交行为

      // 执行AJAX请求
      $.ajax({
        url: 'servlet-url', // 替换为你的Servlet的URL
        type: 'POST', // 或者GET，根据你的需求
        data: $(this).serialize(), // 将表单数据序列化为字符串
        success: function(response) {
          // 处理服务器返回的响应数据
          // 可以在这里更新页面内容或显示成功消息
        },
        error: function(xhr, status, error) {
          // 处理请求错误
          // 可以在这里显示错误消息或执行其他错误处理逻辑
        }
      });
    });
  });
</script>

@WebServlet("/servlet-url")
public class MyServlet extends HttpServlet {
  protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取表单数据
    String name = request.getParameter("name");
    String email = request.getParameter("email");

    // 处理表单数据，可以进行验证、存储到数据库等操作

    // 返回响应数据
    response.setContentType("text/plain");
    response.setCharacterEncoding("UTF-8");
    response.getWriter().write("表单提交成功！");
  }
}