jQuery-ajax-实现注册功能

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）注意事项