如何在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？

回答

相关问题