如何在zend中使用AJAX-JSON組合加載多個DIV？

我在zend框架中逐步學習AJAX。我使用this question作爲第一步，在這個問題上接受的答案正在爲我工作。現在我想使用JSON加載多個DIV。這是我的計劃。如何在zend中使用AJAX-JSON組合加載多個DIV？

IndexController.php：

class IndexController extends Zend_Controller_Action { 

    public function indexAction() { } 

    public function carAction() { } 

    public function bikeAction() { } 
}

index.phtml：

<script type="text/javascript" src="js/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="js/ajax.js"></script> 

<a href='http://practice.dev/index/car' class='ajax'>Car Image</a> 
<a href='http://practice.dev/index/bike' class='ajax'>Bike Image</a> 

<div id="title">Title comes here</div> 
<div id="image">Image comes here</div>

car.phtml：

<?php 
$jsonArray['title'] = "Car"; 
$jsonArray['image'] = "<img src='images/car.jpeg'>"; 
echo Zend_Json::encode($jsonArray); 
?>

bike.phtml：

<?php 
$jsonArray['title'] = "Bike"; 
$jsonArray['image'] = "<img src='images/bike.jpeg'>"; 
echo Zend_Json::encode($jsonArray); 
?>

ajax.js：

jQuery(document).ready(function(){ 
    jQuery('.ajax').click(function(event){ 
     event.preventDefault(); 

     // I just need a js code here that: 
     // load "Car" in title div and car2.jped in image div when "Car Image" link clicked 
     // load "Bike" in title div and bike2.jped in image div when "Bike Image" link clicked 

     }); 
});

我想你已經得到了這一點。當單擊class ='ajax'的任何鏈接時，這意味着它的AJAX調用。在phtml文件（car.phtml，bike.phtml）中的數組（標題，圖像）的索引顯示在哪個DIV中應該加載這個內容。

我的問題：

現在如何實現ajax.js如果在json形式獲取數據做這個工作？

感謝

來源

2010-07-24 NAVEED

Encode JSON使用Zend Framework作爲

echo Zend_Json::encode($jsonArray);

如果您已經使用JSON序列化，則不要在HTML標籤發送圖像。這樣做的缺點基本上是JavaScript代碼不能在圖像上做很多事情，除非將其粘貼到某個頁面。相反，只需將路徑發送到JSON中的圖像即可。

$jsonArray = array(); 
$jsonArray['title'] = "Hello"; 
$jsonArray['image'] = "<img src='images/bike.jpg' />";

在客戶端，接收的JSON的樣子：

{ 
    "title": "Hello", 
    "image": "<img src='images/bike.jpg' />" 
}

所以jQuery代碼需要通過關鍵的每個循環，並注入新的圖像與匹配鍵股利 - 「 image1「或」image2「。

jQuery('.ajax').click(function(event) { 
    event.preventDefault(); 
    // load the href attribute of the link that was clicked 
    jQuery.getJSON(this.href, function(snippets) { 
     for(var id in snippets) { 
      // updated to deal with any type of HTML 
      jQuery('#' + id).html(snippets[id]); 
     } 
    }); 
});

來源

2010-07-24 19:59:42 Anurag

請不要在這裏硬編碼img標籤。我想在DIV中加載任何類型的數據。例如，第一個DIV中的標題（字符串）和第二個DIV中的圖像。可能是我必須在DIV中加載表單。對於所有類型的數據，這個函數應該是通用的。我用圖像作爲例子。 – NAVEED 2010-07-24 20:08:40

我用新的要求編輯了這個問題。謝謝 – NAVEED 2010-07-24 20:14:17

只是附加在這種情況下的HTML。 – Anurag 2010-07-24 20:40:32

你可以編碼您的JSON有兩個值，例如{值1：「數據」，值2：「數據2」} 然後當你的Ajax返回，你可以...

jQuery(document).ready(function(){ 
    jQuery('.ajax').click(function(event){ 
    event.preventDefault(); 
    $.ajax({ 
     url: '<Link to script returning json data>', 
     data:json, //says we are receiving json encoded data 
     success: function(json) { 
      $('#div1).html('<img src="'+json.value1+'"/>'); 
      $('#div2).html('<img src="'+json.value2+'"/>'); 
     } 
    }); 

    });

}）;

來源

2010-07-24 19:59:16 Chris

如何在zend中使用AJAX-JSON組合加載多個DIV？

回答

相關問題