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