如何code一根jQuery的功能，所有的AJAX链接 [英] How to code one jquery function for all AJAX links

问题描述

我在Windows上使用Zend框架。我想在我的项目首次实现Ajax。我搜索的帮助，创造了一个非常简单的Ajax功能。

I am using zend framework on windows. I want to implement ajax in my project first time. I searched for help and created a very simple ajax functionality.

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

以上code是工作，one.phtml和two.phtml在一分别两化的DIV当它的链接被点击的加载数据。你可以看到，我要创建单独的jQuery功能，每一个环节，也需要增加新的类为每个链接的标签。

Above code is working and loading data of one.phtml and two.phtml in 'one' and 'two' DIVs respectively when its link is clicked. You can see that I have to create separate jquery function for each link and also have to add new class for each link tag.

我要怎么办：

我想只用一个jQuery的功能，所有的Ajax请求，不想硬code 网址和成功属性中的该功能。

I want to use only one jquery function for all AJAX requests and don't want to hard code url and success attributes in that function.

当我添加AJAX类的任何链接标签，那么它应该使用AJAX加载内容。

When I add "AJAX" class to any link tag then it should load content using AJAX.

感谢。

推荐答案

对于简单的数据加载中的div我会用load方法

for simple loading of data in divs i would use the load method

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调用，而不是他们的正常使用各个环节。并添加相对属性为那些将包含 ID 容器DIV的..链接

Use a single class to identify all links that should use ajax calls instead of their normal use. And add a rel attribute to those links that will contain the id of the container div..

这篇关于如何code一根jQuery的功能，所有的AJAX链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！