如何爲所有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函數

回答

相關問題