Как загрузить более одного DIV, используя комбинацию AJAX-JSON в Zend?

Question

Я изучаю AJAX в Zend Framework шаг за шагом. Я использую этот вопрос в качестве первого шага, и принятый ответ на этот вопрос работает для меня. Теперь я хочу загрузить более одного DIV, используя JSON. Вот мой план.

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. Индекс массива (title, image) в файлах phtml (car.phtml, bike.phtml) показывает, в какой DIV этот контент должен быть загружен.

Мой вопрос:

Теперь, как реализовать ajax.js для выполнения этой работы, если он получает данные в форме json ?

Спасибо

Answer 1

Кодирование 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 должен проходить по каждому ключу и вставлять новое изображение в 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]);
        }
    });
});

Answer 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+'"/>');
        }
     });

  });

});