如何在Yii＆Ajax中加載文章而不重新加載頁面

Question

我從數據庫中查看文章，並且每個文章視圖都帶有漏洞頁面加載。 因此，我將加載文章而無需重新加載頁面，我認為使用Ajax可以實現此目的，但我對此並不堅決。

這是我的初始概念，如下所示：

布局：

CHtml::link($menu['items'][$itemId]['label'],
   array('articles/view',
   'id'=>$menu['items'][$itemId]['link'],
  )
);

// This showing articles name & link

視圖：

<?php
    echo $model->article_body;
?>

<script>
   jQuery.ajax({
     type: 'POST',
     dataType: 'html',
     url: ('articles/view'),
     success: function(data){
         document.getElementById('articles').innerHTML = data;
     },
     error: function(){
        alert('Somthing wrong');
     }
   });
</script>

控制器：

public function actionView($id)
{
  $model=$this->loadModel($id);
   $this->render('view',array('model' => $model));
}

有人可以幫我嗎？ 謝謝

Answer 1

您必須返回json：

public function actionView($id)
{
  $model=$this->loadModel($id);
  ...

                echo CJSON::encode(
                    array(
                        'status' => 'success',
                        'content' => $this->renderPartial('view',
                            array(
                                'model' => $model,
                            ),
                            true,
                            true
                        ),
                    )
                );
}

Answer 2

如果我正確理解你，

在您的視圖文件中是這樣的。

 echo CHtml::link($menu['items'][$itemId]['label'],
       array('articles/view',
       'id'=>$menu['items'][$itemId]['link'],
      ),array('class'=>'youclassnamehere')
    );
 echo '<div  id="yourDivId"></div>';

在JavaScript中，您的代碼應類似於例如

  $(".youclassnamehere").click(function(){
         $.ajax({
          type:'POST',
         url:$(this).attr('href'),
         success:function(data){
           $("#yourDivId").html(data);
         }
         error:function(data){
          alert('Error occured please try again later..');
         }
    }),
   return false;//this will not redirect your page
});

在控制器動作中，您的代碼例如

 public function actionView($id)
{
  $model=$this->loadModel($id);
   $this->render('view',array('model' => $model));
}

希望這個能對您有所幫助

Answer 3

我從上面的答案中獲得解決方案，但我新添加了如下內容：

array(
   'onclick'=>'javascript:return false'
)