1)編寫js程式碼

register.html中的登錄檔單部分：

  <form id="form-reg" class="form-horizontal" role="form">
	<!--使用者名稱-->
	<div class="form-group">
		<label class="col-md-3 control-label">名字：</label>
		<div class="col-md-8">
			<input name="username" type="text" class="form-control" placeholder="請輸入使用者名稱">
		</div>
	</div>
	<!--密碼-->
	<div class="form-group">
		<label class="col-md-3 control-label"> 密碼：</label>
		<div class="col-md-8">
			<input name="password" type="text" class="form-control" placeholder="請輸入密碼">
		</div>
	</div>
	<!--確認密碼-->
	<div class="form-group">
		<label class="col-md-3 control-label"> 確認密碼：</label>
		<div class="col-md-8">
			<input type="text" class="form-control" placeholder="請再次輸入密碼">
		</div>
	</div>
	<!--提交按鈕-->
	<div class="form-group">
		<label class="col-md-3 control-label"></label>
		<div class="col-md-8">
			<input id="btn-reg" class="btn btn-primary" type="button" value="立即註冊" />
			<span class="pull-right"><small>已經有賬號？</small><a href="login.html">登入</a></span>
		</div>
	</div>
</form>                              
 

註冊頁面的js程式碼：

//serialize()是jQuery的一個方法，可以自動的獲取表單的每個控制元件的值，並且拼接成形如username=tom&password=123456的結構

<script type="text/javascript">
		//1.監聽註冊按鈕是否被點選，如果被點選則執行一個匿名方法function(){}
		$("#btn-reg").click(function () {

			//console.log($("#form-reg").serialize());

			//2.傳送Ajax的非同步請求來完成註冊功能
			$.ajax({    
				url:"/users/add",
				type:"post",
				//$("#form-reg")先獲取整個表單
				data:$("#form-reg").serialize(),
				dataType:"json",
				success:function (backData) { //backData:後端返回給前端的資料
					if (backData.state==200){
						alert("註冊成功！");
					}else{
						alert("註冊失敗！");
					}
				},
				error:function (xhr) {
					alert("註冊時產生未知錯誤:"+xhr.status);
				}
			});
			//ajax中function(){}可以簡寫為{}，但是jQuery中不能省略
		});

	</script>

 

上面的js程式碼中:state是後端自己定義的欄位，而status是官網所提供的，注意區分。

2)測試

訪問這個地址測試：http://localhost:8080/web/register.html

為什麼是訪問這個地址？

結果：測試成功

3）注意事項