1牲距、建立form.html文件,在body中輸入表單代碼仓手,并導入jquery包和form.js包
<form action="" method="post" id="regForm">
<pre>
用戶名:<input type='text' name='userName'><span id="s1"></span>
密碼:<input type='password' name='userPassword'>
確認密碼:<input type='password' name='repwd'>
<input type='submit' name='sub' value="注冊">
</pre>
</form>
導入jquery包和form.js包
<script src="js/jquery1.11.3.min.js"></script>
<script src="js/form.js"></script>
2魄健、建立服務器端servlet文件checkformServlet.servlet,在doGet()里面寫入以下代碼
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
request.setCharacterEncoding("UTF-8");
//禁用緩存
response.setHeader("Pragma", "No-cache");
response.setHeader("Cache-Control", "no-cache");
response.setDateHeader("Expires", 0);
PrintWriter out = response.getWriter();
String userName=request.getParameter("userName");
String userPassword=request.getParameter("userPassword");
out.println("接收到了客戶端提交的"+userName+","+userPassword);
}
3乏矾、建立客戶端form.js代碼
$(function(){
$(":submit[name='sub']").click(function(){
//alert($("#regForm").serialize());
$data=$("#regForm").serialize();
$.ajax({
type:"post",
url:"checkformServlet",
data:$data,
success:function(msg){
alert(msg);
}
})
})
})