我正在zend框架中逐步学习AJAX。我将此问题用作第一步,并且该问题的可接受答案对我有用。现在,我想使用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)中的array(标题,图像)的索引表明应在DIV中加载此内容。
我的问题:
现在,如果它以 json形式获取数据,如何实现ajax.js来完成这项工作?
谢谢
使用Zend Framework将JSON编码为
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]); } }); });