Degradación elegante de las etiquetas de anclaje con javascript

Question

Actualmente confío en las etiquetas de anclaje para realizar solicitudes AJAX en mi aplicación web (usando jQuery). Por ejemplo:

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

Sin embargo, estas etiquetas de anclaje se vuelven prácticamente inútiles si el usuario desactiva JavaScript en su navegador. ¿Cuál es la mejor manera de manejar la degradación elegante de estas etiquetas de anclaje? ¿Es mi única opción cambiarlos a botones dentro de las etiquetas de formulario?

Editar: debería ser más claro y especificar que mi llamada AJAX es una POST HTTP a una URL que no puedo, por razones de seguridad, exponer a GET HTTP normales (por ejemplo, piense en eliminar url " / items / delete / 1 "). Con eso en mente, no puedo cambiar la href del ancla para que sea & Quot; / items / delete / 1 & Quot; para satisfacer a los usuarios con JavaScript desactivado ya que representa un riesgo de seguridad.

Answer 1

La respuesta que estaba buscando está enterrada en uno de los comentarios:

  

su uso de la etiqueta <a> para hacer un HTTP   La operación POST es conflictiva. <=> era   diseñado para HTTP GET. No encontraras   una respuesta satisfactoria aquí si sigues   la semántica de su operación   incrustado en una etiqueta <=>. Ver    http://www.w3.org/2001/tag/doc/whenToUseGet. html

Answer 2

Una opción (por la que estoy seguro de que me votarán negativamente) es no molestarme con las personas que tienen JavaScript desactivado. Muestre un mensaje en una etiqueta <noscript> informando al usuario que su sitio requiere Javascript.

Afectará a dos grupos de personas: aquellos que a sabiendas deshabilitaron JavaScript y supuestamente saben cómo volver a activarlo, y aquellos que están viendo su sitio en un dispositivo móvil más antiguo.

Considere la importancia de estos grupos de personas antes de pasar horas y horas desarrollándose para ellos.

Answer 3

Simple, no use la sintaxis javascript: URI como href, al menos, no en el HTML entregado al cliente.

Entregue el HTML desde el servidor con el href llevando al usuario a la página que desee, y luego reemplace el href (o capture el evento onclick) para la etiqueta de anclaje y haga lo que desee, asegurándose de evitar la acción predeterminada para el incendio del evento.

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

Y estoy totalmente de acuerdo con la sugerencia de leer JavaScript discreto.

Answer 4

Lea sobre JavaScript no intrusivo para aprender cómo separar el comportamiento de JS de su marcado real. Cualquier otra cosa que publique será una repetición de lo que alguien más ha dicho mejor en otro lugar

Answer 5

Su mejor opción para no-JS probablemente sería tener un formulario con un botón de enviar y señalar la acción del formulario a su URL.

Puede diseñar el botón para que se vea como un enlace (o como cualquier otra cosa):

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

Hay un buen ejemplo de estilo de botones en el artículo de Particletree: Redescubriendo el elemento del botón