新人报道,求解!代码卡这里了不知道该怎么搞了....

{{extend name='public/base'}}
{{block name='title'}}
    <title>甜心:用户注册</title>
{{/block}}
{{block name='css'}}
<style type="text/css">
	.error {
			color:red;
		}
</style>
{{/block}}
{{block name='left'}}
<div id="">
	
</div>
{{/block}}
{{block name='main'}}
<div class="col-md-8">
	<div class="col-md-3">
		<img class="img-circle" src="__STATIC__/images/4.jpg" width="150px"/>
		<img class="img-circle" src="__STATIC__/images/5.jpg" width="150px"/>
		<img class="img-circle" src="__STATIC__/images/6.jpg" width="150px"/>
		<img class="img-circle" src="__STATIC__/images/7.jpg" width="150px"/>
		<img class="img-circle" src="__STATIC__/images/11.jpg" width="150px"/>
	</div>
	<div class="col-md-9 table-bordered">
		<h1 class="text-info">用户注册</h1>
		<form method="post" class="form-horizontal">
		    <div class="form-group">
		      <div class="col-md-3 text-right">
		        <label class="control-label" for="username">用户名:</label>
		      </div>
		      <div class="col-md-9">
		        <input type="text" name="username" id="username" value="" class="form-control" placeholder="请呼入长度是2-100位的用户名">
		      </div>
		    </div>
		    <div class="form-group">
		      <div class="col-md-3 text-right">
		        <label class="control-label" for="password">密码:</label>
		      </div>
		      <div class="col-md-9">
		        <input type="password" name="password" id="password" value="" class="form-control" placeholder="请输入长度为6-12的密码,密码只能是数字和字母">
		      </div>
		    </div>
		    <div class="form-group">
		      <div class="col-md-3 text-right">
		        <label class="control-label" for="pwd">确认密码:</label>
		      </div>
		      <div class="col-md-9">
		        <input type="password" name="pwd" id="pwd" value="" class="form-control" placeholder="两次密码必须一致">
		      </div>
		    </div>
		    <div class="form-group">
		      <div class="col-md-3 text-right">
		        <label class="control-label" for="email">用户邮箱:</label>
		      </div>
		      <div class="col-md-9">
		        <input type="email" name="email" id="email" value="" class="form-control" placeholder="请输入合法的邮箱地址">
		      </div>
		    </div>
		    <div class="form-group">
		      <div class="col-md-3 text-right">
		        <label class="control-label" for="phone">联系电话:</label>
		      </div>
		      <div class="col-md-9">
		        <input type="text" name="phone" id="phone" value="" class="form-control" placeholder="请输入合法的联系电话">
		      </div>
		    </div>
		    <div class="form-group row">
					<div class="col-md-3 text-right">
						<label class="control-label" for="captcha">验证码:</label>
					</div>
					<div class="col-md-4">
						<input class='form-control' type="text" name="captcha" id="captcha" value="" required="required"/>
					</div>
					<div class="col-md-5">
						<img src="{{:captcha_src()}}" alt="captcha" id="cap" width="200px"/>
						<br />看不清点击换一张
					</div>
				</div>
		    <div class="form-group">
		      <div class="col-md-9  col-md-offset-3">
		        <input type="submit" value="提交" class="btn btn-primary" id="sub">
		        <input type="reset" value="取消" class="btn btn-default">
		      </div>
		    </div>
	  	</form>
	</div>
</div>
{{/block}}
{{block name='right'}}
{{include file='public/right'}}
{{/block}}
{{block name='js'}}
{{load file='__JS__/jquery.validate.js'}}
	<script type="text/javascript">
		$.validator.addMethod('isPhone',function(value){
			if (value != ""){
				var pt = /^0?1[345678]\d{1}-?\d{4}-?\d{4}$/;
				return pt.test(value);
			} else {
				return true;
			}
		},"手机号不合法");
		$.validator.addMethod('isEmail',function(value){
			if (value != ""){
				var pt = /^[\w\-\.]{3,}@[a-zA-Z\d\-]+(\.[a-zA-Z\d\-]+)?\.[a-zA-Z\d\-]{2,6}$/;
				return pt.test(value);
			} else {
				return true;
			}
		},"错误的邮箱地址!");
		$(function(){
			//验证码点击更新
			$('#cap').click(function(){
				$(this).attr('src',"{{:captcha_src()}}?rand="+Math.random());
			});
			//插件前端验证
			$('form').validate({
				rules:{
					username:{
						required:true,
						minlength:2,
						maxlength:100
					},
					password:{
						required:true,
						minlength:6,
						maxlength:16
					},
					pwd:{
						equalTo: '#password'
					},
					phone:{
						required:true,
						isPhone:true
					},
					email:{
						required:true,
						isEmail: true
					},
					captcha:{
						required:true,
					}
				},
				messages:{
					username:{
						required:'用户名不能为空',
						minlength:'用户名最短是2位',
						maxlength: '用户名最长是100位'
					},
					password:{
						required:'用户密码不能为空',
						minlength:'用户密码最短是6位',
						maxlength: '用户密码最长是16位'
					},
					pwd:{
						equalTo:'两次密码不一致'
					},
					phone:{
						required:'手机号不能为空',
					},
					email:{
						required:'邮箱不能为空',
					},
					captcha:{
						required:'请填写验证码',
					}
				}
			});
		//Ajax表单提交
			$('#sub').click(function(){
				$.ajax({
					type:"post",
					url:"{{:url('index/user/register')}}",
					data:$('form').serialize(),
					success:function(res){
						console.log(res);//就是这个地方怎么写,求解!
					}
					
				});
			});
		});
	</script>
{{/block}}

下面是对应的后端PHP代码!用的TP框架

	public function register(){
		if (request()->isGet()) {
			return $this->fetch();
		}elseif (request()->isPost()) {
			$data = request()->param();
//			echo "<pre>";
//			print_r($data);
//			exit;
			if(!captcha_check($data['captcha'])){
				return $this->error('验证码错误!');
			}
			$model = new UserModel;
			$res = $model->allowField(true)->validate(true)->save($data);
			if($res){
				return $this->success('恭喜注册成功,您可以去登录咯!',url('index/user/login'));
			}else{
				return $this->error($model->getError());
			}
		}
	}

再HTML页面部分里面,不写回调函数的内容,去掉form标签的post属性,整个后端的验证全部没有效果了,直接就存储数据了!加上Post属性,验证码验证就过不去,怎么写怎么错!这是什么道理?

那位大神能给推荐一些Ajax经典实例吗?我是一个小白,连入门都没又呢!不要看那些aabb啥的!基本没什么用,只能反应一些基本操作方式,对于应用没什么明说的例子,我脑子有点笨,对于计算机比较喜爱!

谢谢啦!