代码之家 › 专栏 › 技术社区 › Naveed

如何在zend中使用AJAX-JSON组合加载多个div?

zend-framework json ajax

Naveed · 技术社区 · 14 年前

我正在逐步学习zend框架中的AJAX。我用 this question

IndexController.php:

class IndexController extends Zend_Controller_Action {

    public function indexAction() { }

    public function carAction() { }

    public function bikeAction() { }
}

<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>

汽车.phtml :

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

自行车.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)中数组(title,image)的索引显示应该在哪个DIV中加载此内容。

我的问题是:

现在,如何实现ajax.js来完成这项工作,如果它获得了数据 json

2 回复 | 直到 8 年前

Anurag 14 年前

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代码需要循环遍历每个键,并使用匹配的键“image1”或“image2”将一个新图像注入div。

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]);
        }
    });
});

Chris 14 年前

当你的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+'"/>');
        }
     });

  });