下面介绍我经常使用的用AJAX实现的异步刷新:
view界面代码:
<li class="mb5"> <label class="sectionLabel-A1">空间视角图*: <a href="javascript:void(0);" onclick="addAngle()" style="color: #3B5999;font-weight: normal">添加视角</a> </label> <div id="addAngles" class="sectionBox-A1 clear sectionForm-A1 sectionForm-A1-4"> </div> </li>
js代码:
//添加空间视角 function addAngle() { $.ajax({ type: "POST", url: "/space/addAngle", data:{} , dataType: "html", success: function(html){ $("#addAngles").append(html); } }) }
控制器controller界面的代码:
public function actionAddAngle() { $model=new Space(); $form = $this->Widget('CActiveForm', array()); $this->renderPartial('addAngle',array('model'=>$model,'form'=>$form)); }
异步渲染的页面addAngle.php代码:
<div class="angle_image"> <i class="del_angle_icon"> </i> <p class="angleVal_space"> 视角*: <?php echo CHtml::textField('angle[]','',array('size'=>'25','class'=>'')); ?> </p> <div class="anglePics"> 空间空模图*:<br> <?php echo $form->FileField($model,'pics[]',array('class'=>'')); ?> </div> <div class="anglePics"> 空间效果展示图*:<br> <?php echo $form->FileField($model,'showpics[]',array('class'=>'')); ?> </div> <div class="anglePics"> 空间平面布局图*:<br> <?php echo $form->FileField($model,'floorplan[]',array('class'=>'')); ?> </div> </div>
其原理就是通过view中调用的js代码去请求控制器中的AddAngle方法,把获取的数据渲染addAngle.php页面,并且把渲染的结果以html格式返回给js,js获取到html之后把html代码加到页面的要更新的位置,整个过程是连续的,缺一不可,希望我的方法对大家有帮助!