Java 如何使用JQuery正确提交表单？

我试图检查表单中给定的用户名是否已在数据库中可用，否则将表单数据提交到数据库

我正在使用JSP和Servlet

下面是我的JSP代码

 <script>
$('#theForm').submit(function() { // catch the form's submit event
    $.ajax({ // create an AJAX call...
        data: $(this).serialize(), // get the form data
        type: $(this).attr('method'), // GET or POST
        url: $(this).attr('action'), // the file to call
        success: function(response) { // on success..
            alert(response); // update the DIV
        }
    });
    return false; // cancel original event to prevent form submitting
});
</script>      

 <form id="theForm" class="form-horizontal form-login" action="CheckExistingUser" method="post" data-parsley-validate>
<fieldset>

<!-- Form Name -->
<legend class="legend">Apply For The Account</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Company Name</label>  
  <div class="col-md-6">


<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">User Name</label>  
  <div class="col-md-6">  

 <table>
    <tr>      
      <td style="width: 125%"> <input id="textinput" name="userTxt" type="text" placeholder="" class="form-control input-md" required></td>
      <td id="phoneTxtError" class="red">&nbsp;</td>
    </tr>

 </table>   

  </div>
</div>

<!-- Password input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="passwordinput">Password</label>
  <div class="col-md-6">

  <table>
    <tr>      
      <td style="width: 125%"> <input id="password" name="passwordTxt" type="password" placeholder="" class="form-control input-md" data-parsley-equalto="#password" required></td>
      <td id="passwordError" class="red">&nbsp;</td>
    </tr>

 </table>   

  </div>
</div>

<!-- Password input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="passwordinput">Confirm Password</label>
  <div class="col-md-6">

 <table>
    <tr>      
        <td style="width: 125%"> <input  id="password1" name="confirmPasswordTxt" type="password" placeholder="" class="form-control input-md" data-parsley-equalto="#password" required></td>
      <td id="xpwVerifiedError" class="red">&nbsp;</td>
    </tr>    
 </table>   
    <label id="pwVerifiedError" class="red">&nbsp;</label>  
  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for="singlebutton"></label>
  <div class="col-md-4">
      <button id="singlebutton" name="singlebutton" class="btn btn-primary">Submit</button>
  </div>
</div>

</fieldset>
</form>

---

但是，出现的情况是错误消息“true”被打印在白色空白页中，而不是在警报对话框中。我做错了什么？我在这里也使用引导。

如果AJAX请求成功，

success

是一个要调用的函数，它与该请求的返回结果无关，因此在页面上写入

true

是正常的

表单中提交的事件未注册。简单地说，在页面中呈现表单之前，您试图注册表单的提交事件。下面是修改后的代码

<script>
    $(document).ready(function() {
        $('#theForm').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    alert(response); // update the DIV
                }
            });
            return false; // cancel original event to prevent form submitting
        });
    });
</script>   

$（文档）.ready（函数（）{
$（'#theForm'）.submit（函数（）{//捕获表单的提交事件
$.ajax（{//创建一个ajax调用。。。
数据：$（this）.serialize（），//获取表单数据
类型：$（this.attr（'method'），//GET或POST
url:$（this.attr（'action'），//要调用的文件
成功：函数（响应）{//on success。。
警报（响应）；//更新DIV
}
});
return false；//取消原始事件以阻止表单提交
});
});

<script>
    $(document).ready(function() {
        $('#theForm').submit(function() { // catch the form's submit event
            $.ajax({ // create an AJAX call...
                data: $(this).serialize(), // get the form data
                type: $(this).attr('method'), // GET or POST
                url: $(this).attr('action'), // the file to call
                success: function(response) { // on success..
                    alert(response); // update the DIV
                }
            });
            return false; // cancel original event to prevent form submitting
        });
    });
</script>