使用 ajax 向 servlet 提交表单并在同一页面上获取结果答案

【问题标题】：submit form to servlet using ajax and get results on same page使用 ajax 向 servlet 提交表单并在同一页面上获取结果
【发布时间】：2015-06-16 20:54:50
【问题描述】：

我在使用 ajax 时遇到问题。如果我删除表单标签，那么它工作正常，结果显示在同一页面上。但是使用表单标签，结果显示在不同的页面上，即直接显示到 servlet 但是我正在尝试使用完整的表单标签构建这个项目，并从 ajax 而不是表单操作提交它，这是我的代码

account_recovery.jsp

<%@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="js/jquery-1.11.2.js" type="text/javascript"></script>  
        <script type="text/javascript">  
          $(document).ready(function(){  
              $("#subm").click(function(){  
                  var email = $('#inputEmail').val();  
                  if(email.length >= 3){  
                      $(".statusMessage").html("<img src='images/loading.gif'><font color=gray> Checking availability...</font>");  
                       $.ajax({  
                          type: "POST",  
                          url: "ForgotPasswordServlet",  
                          data: "email="+ email,  
                          success: function(msg){  
                              $(".statusMessage").html(msg);
                          }  
                      });   
                  }  
                  else{  

                      $(".statusMessage").html("<font color=red>Email should be <b>3</b> character long.</font>");  
                  }  

              });  
          });  
        </script>  

    </head>
    <body>
        <jsp:include page="header.jsp"/>


        <br/>

        <div class="container">
            <div class="col-md-6">
            <form class="form-horizontal"  action ="ForgotPasswordServlet" method ="POST">
                <h4 class="form-signin-header" style="margin-top: 75px;">Forgot your password?</h4>
                <br/>Enter the email address that you usually sign in with and we'll help you recover your account.
                <label for="inputUser" class="sr-only"><b>Email:</b></label>
                <br/><input type="text" id="inputEmail" name="email" class="form-control" placeholder="Enter your email address" required autofocus>
                <span class="statusMessage"></span>
                <br/>
                <button class="btn btn-md btn-primary btn-success" type="submit" id="subm"/>Submit</button>

        <br/>For more help to find your email address or password, visit the <a href="#">Help page</a>

            </form>
            </div>

        </div><!---end container--->
         <jsp:include page="footer.jsp"/>
    </body>
</html>

如果需要，可以提供 servlet 的代码

【问题讨论】：

标签： jquery ajax jsp jakarta-ee servlets

【解决方案1】：

您没有阻止表单提交。不如试试这个。

    <script type="text/javascript">  
      $(document).ready(function(){  
          $('form').on('submit',function(event){
             event.preventDefault();
              var email = $('#inputEmail').val();  
              if(email.length >= 3){  
                  $(".statusMessage").html("<img src='images/loading.gif'><font color=gray> Checking availability...</font>");  
                   $.ajax({  
                      type: "POST",  
                      url: "ForgotPasswordServlet",  
                      data: "email="+ email,  
                      success: function(msg){  
                          $(".statusMessage").html(msg);
                      }  
                  });   
              }  
              else{  

                  $(".statusMessage").html("<font color=red>Email should be <b>3</b> character long.</font>");  
              }  

          });  
      });  
    </script>

【讨论】：

我试过了，它没有用，实际上在发布之前我什至试过 $('form').submit(function(e){ e.preventDefault(); 但它没有它从下面的表单提交到 servlet 的工作，我也尝试从表单中删除操作。阻止表单提交的唯一方法是如果我删除了表单标签，但我觉得那样是错误的。
提交这行看起来不正确。尝试代替
@NimazSheik 提交时是否遇到任何 javascript 错误？
实际上你的代码确实有效，我不小心放了另一个括号，我的错。无论如何，非常感谢老兄，是一个很大的帮助
@NimazSheik 没问题。