yii框架使用ajax实现页面局部刷新的方法教程

jerry Yii 2015年08月12日收藏

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>