如何在zend中使用AJAX-JSON组合加载多个DIV？答案

【问题标题】：How to load more than one DIVs using AJAX-JSON combination in zend?如何在zend中使用AJAX-JSON组合加载多个DIV？
【发布时间】：2011-03-20 14:08:59
【问题描述】：

我正在逐步学习zend框架中的AJAX。我使用this question 作为第一步，并且在这个问题中接受的答案对我有用。现在我想使用 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 形式的数据，现在如何实现这个工作？

谢谢

【问题讨论】：

标签： ajax json zend-framework

【解决方案1】：

Encode JSON 使用 Zend 框架作为

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 代码需要循环遍历每个键，并在 div 中注入一个匹配键的新图像 - “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]);
        }
    });
});

【讨论】：

请不要在这里硬编码 img 标签。我想在 DIV 中加载任何类型的数据。例如，第一个 DIV 中的 Heading(string) 和第二个 DIV 中的图像。可能是我必须在 DIV 中加载表单。这个函数应该对所有类型的数据都是通用的。我以图片为例。
在这种情况下只需附加 html。
我试过这段代码，但它在 firebug 控制台中给了我错误：sn-ps is not defined
我在上面的 js 代码中的 jQuery.getJSON() 的第二个参数中用 sn-ps 替换了 images 和这是工作。您能否通过编辑来更正您的答案。那我会很乐意接受的。谢谢。

【解决方案2】：

您可以将您的 json 编码为具有两个值，例如 {value1:"data",value2:"data2"} 然后当你的 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+'"/>');
        }
     });

  });

});

【讨论】：