如何在Zend中使用AJAX，JSON组合加载多个的DIV？ [英] How to load more than one DIVs using AJAX-JSON combination in zend?

问题描述

我在一步Zend框架的步骤学习AJAX。我使用的<一个href="http://stackoverflow.com/questions/3272384/how-to-$c$c-one-jquery-function-for-all-ajax-links">this问题在这个问题的第一步，接受的答案是为我工作。现在，我要加载使用JSON多个资料核实。这是我的计划。

I am learning AJAX in zend framework step by step. I use this question as first step and accepted answer in this question is working for me. Now I want to load more than one DIVs using JSON. Here is my plan.

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

      });
});

我想你已经得到了这一点。当点击带班='阿贾克斯'的任何链接，则意味着它的AJAX调用。阵列（标题，图像）的PHTML文件（car.phtml，bike.phtml）指数显示，其中DIV应加载该内容。

I think you have got this. When any link with class='ajax' is clicked then it means its AJAX call. index of array(title, image) in phtml files(car.phtml, bike.phtml) show that in which DIV this content should be loaded.

我的问题：

现在，如何实现ajax.js做这个工作，如果它得到的数据中的 JSON 形成的？

Now how to implement ajax.js to do this job if it gets data in json form?

感谢

推荐答案

恩code。使用Zend框架的

Encode JSON using the Zend Framework as

echo Zend_Json::encode($jsonArray);

如果您已经在使用JSON序列化，那么就不要在HTML标签发送图像。这样做的缺点是基本的JavaScript code也做不了什么比坚持到页面以外的地方图像。相反，只是发送您的JSON的路径图像。

If you are already using JSON for serialization, then don't send the images in HTML tags. The disadvantage of doing that is basically the JavaScript code cannot do much with the images other than sticking it into the page somewhere. Instead, just send the path to the images in your JSON.

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

在客户端，接收到的JSON的样子：

On the client side, the received JSON will look like:

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

所以jQuery的code需要遍历每个键，和与之相配的钥匙注入一个新的形象进入格 - 。此搜索或图像2

So the jQuery code needs to loop through key each, and inject a new image into the div with matching key - "image1" or "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]);
        }
    });
});

这篇关于如何在Zend中使用AJAX，JSON组合加载多个的DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！