我在 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 和 success 属性。
当我将“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 调用而不是正常使用的链接。并向那些将包含容器 div 的 id
的链接添加 rel
属性..
关于javascript - 如何为所有 AJAX 链接编写一个 jquery 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3272384/