Grazioso degrado dei tag anchor con javascript

Question

Attualmente mi affido ai tag di ancoraggio per eseguire richieste AJAX sulla mia applicazione Web (usando jQuery). Ad esempio:

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

Tuttavia, questi tag di ancoraggio diventano praticamente inutili se l'utente disabilita javascript nel proprio browser. Qual è il modo migliore per gestire il degrado aggraziato di questi tag di ancoraggio? La mia unica opzione è quella di trasformarli tutti in pulsanti all'interno dei tag del modulo?

Modifica: dovrei essere più chiaro e specificare che la mia chiamata AJAX è un POST HTTP a un URL che non posso, per motivi di sicurezza, esporre ai normali GET HTTP (es. pensare a un URL di cancellazione " / items / delete / 1 quot &;). Con questo in mente, non posso cambiare l'href dell'ancoraggio in & Quot; / items / delete / 1 & Quot; per soddisfare gli utenti con javascript disattivato poiché rappresenta un rischio per la sicurezza.

Answer 1

La risposta che stavo cercando è sepolta in uno dei commenti:

  

l'utilizzo del tag <a> per eseguire un HTTP   L'operazione POST è in conflitto. <=> era   progettato per HTTP GET. Non troverai   una risposta soddisfacente qui se continui   la semantica della tua operazione   incorporato in un tag <=>. Vedere    http://www.w3.org/2001/tag/doc/whenToUseGet. html

Answer 2

Un'opzione (per la quale sono sicuro che mi verrà ridimensionato), è quella di non disturbare con le persone che hanno disattivato JavaScript. Visualizza un messaggio in un tag <noscript> che informa l'utente che il tuo sito richiede Javascript.

Interesserà due gruppi di persone: quelli che hanno disabilitato consapevolmente javascript e presumibilmente sanno come riaccenderlo e quelli che stanno visualizzando il tuo sito su un dispositivo mobile più vecchio.

Considera quanto sono importanti questi gruppi di persone prima di continuare a trascorrere ore e ore a sviluppare per loro.

Answer 3

Semplice, non usare javascript: sintassi URI come href, almeno, non nel codice HTML consegnato al client.

Fornisci l'HTML dal server con l'href che porta l'utente in qualunque pagina tu voglia portarli, quindi sostituisci l'href (o acquisisci l'evento onclick) per il tag anchor e fai quello che vuoi, assicurandoti di impedire l'azione predefinita per l'evento fire.

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

E sono pienamente d'accordo con il suggerimento di leggere JavaScript discreto.

Answer 4

Leggi JavaScript discreto per sapere come separare il comportamento JS dal tuo markup effettivo. Qualsiasi altra cosa che pubblicherò sarà solo un ripasso di ciò che qualcun altro ha detto meglio altrove

Answer 5

La tua scommessa migliore per no-JS sarebbe probabilmente quella di avere un modulo con un pulsante di invio e indicare l'azione del modulo sul tuo URL.

Puoi modellare il pulsante in modo che appaia come un link (o come qualsiasi altra cosa):

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

C'è un buon esempio di stile dei pulsanti nell'articolo di Particletree: Riscoprire l'elemento del pulsante