Graceful Degradation von Anker-Tags mit Javascript
-
19-08-2019 - |
Frage
I stützen sich zur Zeit auf Anker-Tags AJAX-Anfragen auf meiner Web-Anwendung (mit jQuery) auszuführen. Zum Beispiel:
<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>
Allerdings sind diese Anker-Tags ziemlich nutzlos, wenn der Nutzer Javascript in ihrem Browser deaktiviert. Was ist die beste Art und Weise Graceful Degradation dieser Anker-Tags zu handhaben? Ist meine einzige Möglichkeit, sie alle Tasten innerhalb Formular-Tags zu wechseln?
Edit: Ich soll klar sein und angeben, dass mein AJAX-Aufruf einen HTTP-POST an eine URL, die ich nicht, aus Sicherheitsgründen, den normalen HTTP aussetzen gets (zB denkt an einer Lösch url „/ Artikel / Löschen / 1 „). In diesem Sinne kann ich nicht die href des Ankers ändern „/ Artikel / Löschen / 1“ zu sein, um Benutzer mit Javascript zu befriedigen ausgeschaltet, da sie ein Sicherheitsrisiko darstellen.
Lösung 3
Die Antwort, die ich suchte in einem der Kommentare begraben liegt:
Ihre Nutzung des
<a>
Tages einen HTTP zu tun POST-Operation ist widersprüchlich.<a>
war die für HTTP-GET. Sie werden nicht finden eine befriedigende Antwort hier, wenn Sie halten die Semantik Ihrer Operation in einem<a>
Tag eingebettet. Sehen http://www.w3.org/2001/tag/doc/whenToUseGet. html
Andere Tipps
Eine Option (für die ich bin sicher, ich werde downvoted bekommen), ist nicht mit Menschen zu kümmern, die Sie Javascript ausgeschaltet haben. Zeigen Sie eine Nachricht in einem <noscript>
-Tag informiert den Benutzer, dass Ihre Website benötigt Javascript.
Es wird zwei Gruppen von Menschen beeinflussen. Diejenigen, die wissentlich Javascript haben und vermutlich wissen, wie es wieder zu aktivieren, und diejenigen, die auf einem älteren mobilen Gerät sehen Ihrer Website
Überlegen Sie, wie wichtig diese Gruppen von Menschen sind, bevor Sie für sie zu entwickeln viele Stunden verbringen weitergehen.
Einfache, nicht verwenden JavaScript. URI-Syntax als href, zumindest nicht in der HTML an den Client ausgeliefert
Geben Sie den HTML-Code vom Server mit dem href nimmt den Benutzer auf, was auch immer Seite wollen, um sie zu nehmen, und dann die href ersetzen (oder das Onclick-Ereignis erfassen) für den Anker-Tag und tun, was Sie wollen, sicher zu sein, zu verhindern, die Standard-Aktion für das Ereignis Feuer.
<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>
Und ich stimme voll und ganz mit dem Vorschlag Dezente JavaScript zu lesen.
Lesen Sie mehr über Dezente JavaScript zu lernen, wie JS Verhalten von Ihrem eigentlichen Auszeichnungs zu trennen. Alles, was ich sonst noch schreiben wird nur ein Aufguss sein, was jemand anderes besser an anderer Stelle gesagt hat
Ihre beste Wette für No-JS würde wahrscheinlich ein Formular mit einer Submit-Button haben sein, und zeigt die Maßnahmen zu Ihrer URL des Formulars.
Sie können die Schaltfläche Stil wie ein Link zu suchen (oder wie alles andere):
<button class="linkstyle" type="submit">Foo</button>
<style type="text/css">
button.linkstyle { border:none; background:none; padding:0; }
<style>
Es ist ein gutes Beispiel für Styling-Tasten in Particletree des Artikels: Die Wiederentdeckung der Button Element