872   HTML jQuery JS

1, html 内容,注意button的type=”submit”,在点击button时会自动提交表单;如果为type=”button”时,则不会;

  <form id="registerForm" class="form-horizontal">

 <div class="form-group">
 <label class="col-md-4 control-label">Email</label>
 <div class="col-md-3">
 <input name="userEmail" class="form-control">
 <div id="userEmailAlert" class="alert-required">Email is not right</div>
 </div>
 </div>
 <div class="form-group">
 <label class="col-md-4 control-label">Password</label>
 <div class="col-md-3">
 <input name="password" class="form-control">
 <div id="passwordAlert" class="alert-required">This field is required</div>
 </div>
 </div>
 <div class="form-group">
 <label class="col-md-4 control-label">Confirm Password</label>
 <div class="col-md-3">
 <input name="confirmPassword" class="form-control">
 <div id="confirmPasswordAlert" class="alert-required">confirmPassword must be same as password</div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-6 col-md-offset-4">
 <button type="submit" id="registerButton" class="btn btn-primary">Register</button>
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-6 col-md-offset-4"><a id="goToLogin">Go to Login</a></div>
 </div>
 </form>

2,JS 内容

		$("#registerForm").submit(function(e) { // 点击button会自动提交表单,这里会捕捉表单提交的事件

			var url = '/users/register'; 

			$.ajax({ // 通过ajax来提交表单
				type: "POST",
				url: url,
				timeout : 10000,
				dataType: "json",
				data: $("#registerForm").serialize(), 
				success: function(data){
	

				},
	           	error:function(error) {

	            },
				complete : function(XMLHttpRequest,status){
				}
	        });

			e.preventDefault(); // 既然通过了ajax提交,那么表单自动提交就不需要了
		});



Leave a Reply

Your email address will not be published. Required fields are marked *