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

Question

我在 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 加载内容。

谢谢。

Answer 1

简单而漂亮。不需要 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

Answer 2

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

Answer 3

精简版：

$(函数(){
    $('.one').click(loadOne);
    $('.two').click(loadTwo);
});

函数加载一个（事件）{
    event.preventDefault();
    $('#one').load('/index/one');
}

函数加载二（事件）{
    event.preventDefault();
    $('#two').load('/index/two');
}

Answer 4

也许是这样的：

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

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