我在Windows上使用zend框架。我想在我的项目中第一次实现ajax。我寻求帮助,并创建了一个非常简单的ajax功能。
IndexController.php
public function indexAction() { } public function oneAction() { } public function twoAction() { }
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/one' class='one'>One</a> <a href='http://practice.dev/index/two' class='two'>Two</a> <br /><br /> <div id="one">one.phtml content comes here</div> <div id="two">two.phtml content comes here</div>
AJAX.js
jQuery(document).ready(function(){ jQuery('.one').click(loadOne); jQuery('.two').click(loadTwo); }); function loadOne(event) { event.preventDefault(); jQuery.ajax({ url: '/index/one', success: function( data ) { jQuery('#one').html(data); } }); } function loadTwo(event) { event.preventDefault(); jQuery.ajax({ url: '/index/two', success: function( data ){ jQuery('#two').html(data); } }); }
上面的代码在单击链接时分别在“一个”和“两个” DIV中工作并加载one.phtml和two.phtml的数据。您可以看到我必须为每个链接创建单独的jquery函数,并且还必须为每个链接标记添加新的类。
我想做的事 ? :
我只想对所有AJAX请求使用一个jquery函数,并且不想对该函数中的 url 和 成功 属性进行硬编码。
当我将“ AJAX”类添加到任何链接标记时,它应该使用AJAX加载内容。
谢谢。
为了简单地在div中加载数据,我将使用load方法
的HTML
<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/one' class='ajax' rel="one">One</a> <a href='http://practice.dev/index/two' class='ajax' rel="two">Two</a> <br /><br /> <div id="one">one.phtml content comes here</div> <div id="two">two.phtml content comes here</div>
JS
jQuery(document).ready(function(){ jQuery('.ajax').click(function(event){ event.preventDefault(); var target = '#' + jQuery(this).attr('rel'); var href = jQuery(this).attr('href'); jQuery( target ).load( href ); }); });
使用单个类来标识应使用ajax调用而不是其正常使用的所有链接。并将rel属性添加到那些包含id容器div的链接。
rel
id