Question

我希望在将表单与Jquery和ajax一起提交给servlet之后保持在同一页面上。这是我的代码：

的script.js

clang_error.cpp:7:19: error: default initialization of an object of const type 'const my_struct' without a user-provided default constructor
   const my_struct my_object;
                   ^
clang_error.cpp:7:28: note: add an explicit initializer to initialize 'my_object'
   const my_struct my_object;
                            ^
                             = {}
1 error generated.

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

$(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();

});

这是我的servlet：

  <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的文本。但是我希望来自servlet的响应文本显示在与我的表单相同页面上的div（antwort - 表单下方）

Answer 1

您在选择器中遇到问题。您只是尝试选择您没有的课程（.myForm）。 USe id选择器（#contactForm）：

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

Answer 2

更改此

<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) {

Answer 3

如果你只想把这个文字“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?

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

3 个答案:

另见：