下面介绍我经常使用的用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代码加到页面的要更新的位置,整个过程是连续的,缺一不可,希望我的方法对大家有帮助!