Comment transmettre des données à l'aide des méthodes ajax de jQuery sur les événements/liens click?

Question

En utilisant javascript 'old school' vous placeriez l'ID comme paramètre dans un appel de fonction en ligne (onclick="my_function(28)" ou similaire), avec l'ID fourni par votre code côté serveur.

En utilisant 'new school' javascript, l'appel de fonction est extrait de l'élément, alors comment passer l'ID?

Je pense:

<a id="28" class="do-something" href="#">Do something</a> 

$('a.do-something).click(function(event){ 

    element_id = $(this).attr('id'); 

    $.get('something.php', { id: element_id }); 

    return false; 

}); 

Y at-il une convention ou les meilleures pratiques que vous utilisez/ont vu?

[Mise à jour: ajout de la valeur false; ]

Answer 1

Habituellement quelque chose comme ça, je vais juste utiliser le HREF pour stocker l'URL du gestionnaire jQuery doit utiliser:

<a class="do-something" href="something.php?id=28">Do something</a> 

$('a.do-something).click(function(event){ 
    $.get($(this).attr('href')); 
    return false; 
}); 

De cette façon, l'ID peut encore être autour Incase vous avez besoin pour CSS. De plus, si vous avez besoin de plusieurs paramètres à envoyer dans la fonction php, vous n'avez pas à vous inquiéter, cela fait partie de l'URL comme d'habitude.

Le retour false empêche le navigateur d'accéder réellement au lien lorsqu'il est cliqué dessus.

Answer 2

La réponse de Parrots est la meilleure pour ce cas particulier: si vous utilisez un lien, le href doit pointer vers un emplacement utile pour les utilisateurs non-JavaScript et pour ceux qui ouvrent le lien en utilisant le clic-droit ou le clic-droit ou peu importe.

Si vous n'avez pas de destination pour un lien, vous ne devriez pas vraiment utiliser un lien. Vous pouvez utiliser un span comme SO (bien que cela nécessite un peu d'aide tabindex et script si vous voulez le rendre correctement compatible avec le clavier) ou, généralement, mieux (si cela ne vous dérange pas le pixel supplémentaire de rembourrage et de mouvement dans IE), un bouton redessiné.

Toutefois, dans le cas général, vous devez parfois inclure des données supplémentaires qui ne tiennent pas dans un attribut existant tel que href. Parfois, cela peut être dans le id, mais alors vous êtes un peu limité avec les caractères que vous utilisez. Par exemple, votre code est un code HTML non valide car les identifiants ne peuvent pas commencer par un nombre. Pour les identifiants numériques, vous pouvez essayer id="foo-28" et extraire le numéro du code.

Ou, vous pouvez commencer à mettre plusieurs paramètres dans les noms de classe (class="foo-28 bar-16a") et en utilisant une fonction JS pour diviser, correspondre au préfixe nommé et renvoyer le reste. La plupart des caractères sont autorisés dans un nom de classe, mais bien sûr, vous ne pouvez pas utiliser un autre espace. Vous pouvez également l'encoder d'une manière ou d'une autre dans le className, par exemple le codage URL.

Ou, vous pouvez ajouter un commentaire dans l'élément et utiliser des méthodes DOM pour obtenir l'objet de commentaire et extraire ses données. Vous pouvez mettre JavaScript/JSON à l'intérieur, par exemple .:

<span class="do-something"><!-- {foo: 28, bar: '16a'} --> Something </a> 

Ou, vous pouvez utiliser les attributs HTML5 data-. Ou (... plusieurs autres options ...)