degradação graciosa de marcas de âncora com javascript

Question

I atualmente contam com marcas de âncora para executar solicitações de AJAX no meu aplicativo web (usando jQuery). Por exemplo:

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

No entanto, essas marcas de âncora praticamente se tornar inútil se o javascript desativa usuário em seu browser. Qual é a melhor maneira de lidar com a degradação graciosa destas marcas de âncora? É a minha única opção de mudar-los todos para botões dentro de tags de formulário?

Edit: eu deveria ser mais clara e especificar que minha chamada AJAX é um HTTP POST para um URL que não pode, por razões de segurança, expor a HTTP normal Gets (por exemplo, pensar em uma url de exclusão "/ itens / apagar / 1 "). Com isso em mente, eu não posso mudar a href da âncora a ser "/ itens / apagar / 1", a fim de satisfazer os usuários com o javascript desligado uma vez que representa um risco de segurança.

Answer 1

A resposta que eu estava procurando é enterrado em um dos comentários:

o uso do tag <a> para fazer um HTTP operação POST está em conflito. <a> foi projetado para HTTP GET. Você não vai encontrar uma resposta satisfatória aqui se manter a semântica de sua operação incorporado em um tag <a>. Vejo http://www.w3.org/2001/tag/doc/whenToUseGet. html

Answer 2

Uma opção (para o qual eu tenho certeza que vou ficar downvoted), é a de não se preocupar com as pessoas que têm off javascript. Exibir uma mensagem em uma tag <noscript> informando ao usuário que o site requer Javascript.

Isso vai afetar dois grupos de pessoas:. Aqueles que têm javascript conscientemente desativado e, presumivelmente, saber como ligá-lo novamente, e aqueles que estão vendo seu site em um dispositivo móvel mais velho

Considere o quão importante esses grupos de pessoas são antes de ir de passar horas e horas desenvolvendo para eles.

Answer 3

Simples, não use o javascript:. Sintaxe URI como o href, pelo menos, não no HTML entregue ao cliente

Entregar o HTML do servidor com a href levando o usuário a qualquer página que você deseja levá-los, e, em seguida, substituir a href (ou capturar o evento onclick) para a tag âncora e fazer o que quiser, sendo certo para evitar a ação padrão para o fogo 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>

E concordo plenamente com a sugestão de ler JavaScript discreta.

Answer 4

Leia sobre JavaScript discreta para aprender a separar o comportamento JS de sua marcação real. Qualquer outra coisa que eu post vai ser apenas uma repetição do que alguém disse melhor em outro lugar

Answer 5

Sua melhor aposta para não-JS seria provavelmente ter um formulário com um botão de envio, e ponto de ação do formulário para o seu URL.

Você pode estilizar o botão para se parecer com um link (ou como qualquer outra coisa):

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

Há um bom exemplo do estilo de botões no artigo de Particletree: Redescobrindo o botão elemento