Javascript 如何为所有AJAX链接编写一个jquery函数

我正在windows上使用zend framework。我想第一次在我的项目中实现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>

上面的代码在单击其链接时分别在“one”和“two”div中工作和加载one.phtml和two.phtml的数据。您可以看到，我必须为每个链接创建单独的jquery函数，还必须为每个链接标记添加新类

我想做什么？：

我只想对所有AJAX请求使用一个jquery函数，不想在该函数中硬编码url和success属性

当我向任何链接标记添加“AJAX”类时，它应该使用AJAX加载内容

谢谢。

也许这个：

function loadData(url, callback) {
    jQuery.ajax({url: url, success: callback});
}

loadData('/index/one', function( data ) {
    jQuery('#one').html(data);
})

loadData('/index/two', function( data ) {
    jQuery('#two').html(data);
})

---

为了使它更加紧凑，您可以为两者定义相同的回调，然后让处理程序决定响应数据应该写入哪个元素。

对于在divs中简单加载数据，我将使用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>

使用单个类来标识应该使用ajax调用而不是正常使用的所有链接。并将

rel

属性添加到将包含容器分区的

id

的链接中。

压缩版本：

$(function(){ $('.one').click(loadOne); $('.two').click(loadTwo); }); function loadOne(event) { event.preventDefault(); $('#one').load('/index/one'); } function loadTwo(event) { event.preventDefault(); $('#two').load('/index/two'); } $（函数（）{ $（'.one'）。单击（loadOne）； $（'.two'）。单击（loadTwo）； }); 函数loadOne（事件）{ event.preventDefault（）； $（'一'）。； } 函数loadTwo（事件）{ event.preventDefault（）； $（'二'）。；

---

} 简单又漂亮。不需要Jquery。看看这个：

用法：

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

有关更多设置，请在此处签出演示：

---

这里#1和#2也硬编码。我们不能也通过这个吗？例如数组（'one'=>one.phtml，'two'=>two.phtml）；正如我在回复末尾提到的，您的响应应该包含一些内容，通过这些内容，Ajax事件处理程序可以告诉您需要将响应内容应用到哪些元素。这是

rel

属性的正确用法，还是使用

数据-

HTML5属性更有意义？@Eric，您有道理。我所做的用法与w3标准在语义上的意图不符。。

数据-

更合适。。尽管它在非HTML5验证程序中是无效的。@gaby另一种可能是在“class”值中放入类似“target:one”或“target:two”的内容。然后脚本就可以去掉“一”或“二”。@pointy，如果类名中有

：

，那会被认为是有效的html吗？（同时，感谢您的编辑…）我认为关于类名中的内容没有太多规则，但是您可以使用其他东西，比如“ajax-”作为前缀。我从来没有听说过由类名中的有趣字符引起的任何问题。你使用

jQuery

而不是

$

有什么原因吗？这真的重要吗？也许他正在使用jquery的其他js库？ $(function(){ $('.one').click(loadOne); $('.two').click(loadTwo); }); function loadOne(event) { event.preventDefault(); $('#one').load('/index/one'); } function loadTwo(event) { event.preventDefault(); $('#two').load('/index/two'); }

<script src="bjax.min.js" type="text/javascript"></script>
<link href="bjax.min.css" rel="stylesheet" type="text/css" />

$('a').bjax();