Comment coder une fonction jquery pour tous les liens AJAX

Question

J'utilise zend framework sur windows. Je veux implémenter ajax dans mon projet pour la première fois. J'ai cherché de l'aide et j'ai créé une fonctionnalité ajax très simple.

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

Au-dessus de code est wor king et en chargeant les données de one.phtml et two.phtml respectivement dans les DIVs 'one' et 'two' quand on clique sur son lien. Vous pouvez voir que je dois créer une fonction jquery séparée pour chaque lien et ajouter une nouvelle classe pour chaque lien.

Qu'est-ce que je veux faire?:

Je veux utiliser une seule fonction jquery pour toutes les requêtes AJAX et ne veux pas coder en dur url et succès attributs dans cette fonction.

Lorsque j'ajoute la classe "AJAX" à une balise de lien, elle doit charger le contenu en utilisant AJAX.

Merci.

Answer 1

pour le chargement simple des données dans divs je voudrais utiliser la méthode de charge

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

     }); 
}); 

Utilisez une seule classe pour identifier tous les liens devrait utiliser les appels ajax au lieu de leur utilisation normale. Et ajouter un attribut rel à ces liens qui contiennent le id du conteneur div ..

Answer 2

Peut-être ceci:

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

Pour rendre cela encore plus compact vous pouvez définir le même rappel pour les deux et que le gestionnaire décider quel élément les données de réponse doivent être écrites.

Answer 3

Version compacte:

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

Answer 4

simple et agréable. Aucun Jquery requis.Check this out: Bjax

Utilisation:

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

Enfin, inclure dans la tête de votre html:

$('a').bjax(); 

Pour plus de paramètres, démonstration de votre commande ici: Bjax Demo