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

我在windows上使用zend框架。我想在我的项目中第一次实现ajax。我寻求帮助，并创建了一个非常简单的ajax功能。如何为所有AJAX链接编写一个jquery函数

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); 
        } 
    }); 
}

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

我想干什么？：

我希望只使用一个jQuery的功能适用于所有的AJAX请求，不想硬编码网址和成功在功能属性。

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

谢谢。

来源

2010-07-17 NAVEED

您是否在'$'上使用'jQuery'是出于某种原因？ – Eric 2010-07-17 17:15:52

它真的很重要吗？也许他正在使用jQuery的其他js库？ – Gavrisimo 2010-07-17 17:20:05

在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>

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属性添加到将包含容器div的id这些链接..

来源

2010-07-17 17:09:04

织补。在我之前到达那里。 – Eric 2010-07-17 17:13:04

正确使用'rel'属性，还是使用'data-'HTML5属性更合理？ – Eric 2010-07-17 17:13:51

@Eric，你有一点。我所做的用法并不是w3标准的语义目的。'data-'会更合适.. *虽然它在非html 5验证器中是无效的。* – 2010-07-17 17:16:31

也许这：

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); 
})

为了使这更加紧凑，你可以定义相同的回调都然后有处理决定哪些元素的响应数据应被写入。

来源

2010-07-17 16:59:22 Roman

这里#one和#two也是硬编码的。我们能不能也通过这个？例如;阵列（ '一个'=> one.phtml， '二'=> two.phtml）; – NAVEED 2010-07-17 17:10:54

就像我在回复结束时提到的那样，您的回复应该包含Ajax事件处理程序可以告诉哪些元素需要应用响应内容的东西。 – Roman 2010-07-19 15:24:16

紧凑型：

$(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') ; 
}

来源

2010-07-17 17:12:20 Eric

简单又好的。不需要Jquery。检查了这一点： Bjax

用法：

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

最后，包括这在HTML的HEAD：

$('a').bjax();

更多的设置，结帐的演示这里： Bjax Demo

来源

2015-11-24 01:31:27 endur

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

回答

相关问题