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

Question

在我将带有 Jquery 和 ajax 的表单提交到 servlet 后，我​​想留在同一页面上。 这是我的代码：

script.js

$(document).on('submit', '.myForm', function(e) {
  $.ajax({
    url: $(this).attr('action'),
    type: $(this).attr('method'),
    data: $(this).serialize(),
    success: function(data) {
    $('#antwort').html(data).fadeIn("slow");
    //For testing
    //alert(data)
    }
 });
 e.preventDefault();

});

我的 kontakt.html 代码如下所示：

  <form role="form" id="contactForm" method="POST" action="MailServlet" name="myForm">
    <div class="form-group">
        <label for="InputName">Ihr Name</label>
        <input type="text" class="form-control" id="name" name="name">
    </div>
    <div class="form-group">
        <label for="InputEmail1">Ihr EMail Adresse</label>
        <input type="email" class="form-control" id="email" name="mail">
    </div>
    <div class="form-group">
        <label for="InputMessage">Ihre Nachricht an uns</label>
        <textarea class="form-control" id="nachricht" rows="8" name="nachricht"></textarea>
    </div>
    <button type="submit" class="btn btn-ar btn-primary" id="sendenBtn">senden</button>
    <div class="clearfix"></div>
</form>
<div id="antwort" style="color:green; font-weight:bold;display:none;"></div>

这是我的 servlet：

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    response.setContentType("text/html");
    response.setHeader("Cache-control", "no-cache, no-store");
    response.setHeader("Pragma", "no-cache");
    response.setHeader("Expires", "-1");

    String name = request.getParameter("name");
    String email = request.getParameter("email");
    String nachricht = request.getParameter("nachricht");

    out.println("Vielen Dank");

    response.sendRedirect("kontakt.html");

}

所以问题是，我在提交表单后得到了一个空白页面，其中包含来自 servlet 的文本。但我希望来自 servlet 的响应文本显示在与我的表单在同一页面上的 div（antwort - 表单正下方）中

Answer 1

如果你只是想把这个文本“Vielen Dank”放在一个 div 中

删除这些行：

PrintWriter out = response.getWriter();    

out.println("Vielen Dank");

response.sendRedirect("kontakt.html");

并把这个：

response.getWriter().write("Vielen Dank");

另见：

How to use Servlets and Ajax?

Answer 2

您的选择器有问题。您只是尝试选择您没有的课程（.myForm）。使用 id 选择器 (#contactForm)：

$(document).on('submit', '#contactForm' // note this instead of '.myForm'
, function(e) {
//other...
});

Answer 3

改变这个

<form role="form" id="contactForm" method="POST" action="MailServlet" name="myForm">

进入这个

<form id="contactForm" name="myForm">

因为您不需要在 html 中为表单指定任何属性即可使用 ajax 运行它

然后用它拥有的 id 来引用它。您在 js 中使用了一个类，但表单没有这样的属性，因此永远不会调用 js：

$(document).on('submit', '#contactForm', function(e) {