Dégradation gracieuse des balises d'ancrage avec javascript

Question

Je compte actuellement sur les balises d'ancrage pour effectuer des requêtes AJAX sur mon application Web (à l'aide de jQuery). Par exemple:

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function() {
            // Perform AJAX call and manipulate the DOM
        });
    });

    <a id="test" href="">Click me!</a>
</script>

Cependant, ces balises d'ancrage deviennent quasiment inutiles si l'utilisateur désactive le javascript dans son navigateur. Quelle est la meilleure façon de gérer la dégradation gracieuse de ces balises d'ancrage? Est-ce que ma seule option est de tous les basculer vers des boutons à l'intérieur des balises de formulaire?

Éditer: Je devrais être plus clair et préciser que mon appel AJAX est un envoi HTTP POST vers une URL que je ne peux pas, pour des raisons de sécurité, exposer à des GET HTTP normaux (par exemple, pensez à une URL de suppression " / items / delete / 1 "). Dans cet esprit, je ne peux pas changer le href de l'ancre pour qu'il soit & Quot; / items / delete / 1 & Quot; afin de satisfaire les utilisateurs avec le javascript désactivé, car cela pose un risque pour la sécurité.

Answer 1

La réponse que je cherchais se trouve dans l'un des commentaires:

  

votre utilisation de la balise <a> pour faire un HTTP   L'opération POST est en conflit. <=> était   conçu pour HTTP GET. Vous ne trouverez pas   une réponse satisfaisante ici si vous continuez   la sémantique de votre opération   incorporé dans une balise <=>. Voir    http://www.w3.org/2001/tag/doc/whenToUseseGet. html

Answer 2

Une option (pour laquelle je suis sûr que je serai voté), est de ne pas s’embêter avec les gens qui ont javascript désactivé. Affichez un message dans une balise <noscript> informant l'utilisateur que votre site requiert Javascript.

Cela affectera deux groupes de personnes: ceux qui ont sciemment désactivé le javascript et qui savent probablement comment le réactiver, et ceux qui consultent votre site sur un ancien appareil mobile.

Réfléchissez à l’importance de ces groupes de personnes avant de passer des heures et des heures à les développer.

Answer 3

Simple, n'utilisez pas la syntaxe javascript: URI comme href, du moins, pas dans le code HTML remis au client.

Fournissez le code HTML du serveur avec le préfixe href, en dirigeant l'utilisateur vers la page de votre choix, puis remplacez le préfixe href (ou capturez l'événement onclick) de la balise d'ancrage et faites ce que vous voulez, en évitant bien sûr l'action par défaut pour l'événement déclenché.

<script type="text/javascript">
    $(document).ready(function() {
        $("#test").click(function(e) {
            // Perform AJAX call and manipulate the DOM
            e.preventDefault();
        });
    });

    <a id="test" href="/Proper/URI">Click me!</a>
</script>

Et je suis entièrement d'accord avec la suggestion de lire JavaScript discret.

Answer 4

Découvrez JavaScript discret pour apprendre à séparer le comportement JS de votre balise réelle. Tout ce que je posterai ne sera qu'un récapitulatif de ce que quelqu'un d'autre a dit de meilleur ailleurs

Answer 5

Votre meilleur choix pour no-JS serait probablement d'avoir un formulaire avec un bouton d'envoi et de pointer l'action du formulaire sur votre URL.

Vous pouvez attribuer à ce bouton l'aspect d'un lien (ou de n'importe quoi d'autre):

<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>

Il existe un bon exemple de boutons de style dans l'article de Particletree: Redécouvrir l'élément de bouton