代码之家 › 专栏 › 技术社区 › Naveed

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

zend-framework json ajax jquery javascript

Naveed · 技术社区 · 14 年前

我在windows上使用zend框架。我想第一次在我的项目中实现ajax。我搜索了帮助并创建了一个非常简单的ajax功能。

索引控制器.php

public function indexAction() {
}

public function oneAction() {
}

public function twoAction() {
}

索引.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>

阿贾克斯.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函数,还必须为每个链接标记添加新类。

我想做什么? :

网址和成功

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

4 回复 | 直到 14 年前

Pointy 14 年前

对于在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 集装箱部的。。

endur 9 年前

简单又漂亮。不需要Jquery。看看这个: Bjax

用法:

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

$('a').bjax();

有关更多设置,请在此处查看演示: Bjax Demo

Roman 14 年前

也许是这样:

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

Eric 14 年前

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