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

问题描述

我正在逐步学习 Zend 框架中的 AJAX.我使用 形式?

谢谢

解决方案

使用 Zend 框架对 JSON 进行编码

echo Zend_Json::encode($jsonArray);

如果您已经在使用 JSON 进行序列化，则不要以 HTML 标签发送图像.这样做的缺点基本上是 JavaScript 代码除了将图像粘贴到页面某处之外，不能对图像做太多事情.相反，只需将路径发送到 JSON 中的图像即可.

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

在客户端，接收到的 JSON 将如下所示:

<代码>{"title": "你好","image": "<img src='images/bike.jpg'/>"}

因此 jQuery 代码需要遍历每个键，并使用匹配的键 - image1"或image2"将新图像注入到 div 中.

jQuery('.ajax').click(function(event) {event.preventDefault();//加载被点击的链接的 href 属性jQuery.getJSON(this.href, function(snippets) {for(片段中的var id){//更新以处理任何类型的 HTMLjQuery('#' + id).html(snippets[id]);}});});

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

      });
});

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.

My Question:

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

Thanks

解决方案

Encode JSON using the Zend Framework as

echo Zend_Json::encode($jsonArray);

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' />";

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

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

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