Изящная деградация якорных тегов с помощью JavaScript

Question

В настоящее время я использую теги привязки для выполнения запросов AJAX в моем веб-приложении (используя jQuery). Например:

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

Однако эти якорные теги становятся бесполезными, если пользователь отключает JavaScript в своем браузере. Каков наилучший способ справиться с постепенным ухудшением качества этих тегов привязки? Является ли мой единственный вариант переключать их все на кнопки внутри тегов формы?

Редактировать: я должен быть более ясным и указать, что мой вызов AJAX - это HTTP-запрос POST к URL-адресу, который я не могу по соображениям безопасности выставить обычным HTTP-запросам GET (например, подумайте об URL-адресе удаления &; / items / удалить / 1 Quot &;). Имея это в виду, я не могу изменить ссылку якоря на & Quot; / items / delete / 1 & Quot; чтобы удовлетворить пользователей с отключенным JavaScript, так как это представляет угрозу безопасности.

Answer 1

Ответ, который я искал, похоронен в одном из комментариев:

  

использование вами тега <a> для выполнения HTTP   Операция POST противоречива. <=> было   предназначен для HTTP GET. Вы не найдете   удовлетворительный ответ здесь, если вы продолжите   семантика вашей операции   встроен в тег <=>. Увидеть    http://www.w3.org/2001/tag/doc/whenToUseGet. HTML

Answer 2

Один из вариантов (за который, я уверен, я получу отрицательный голос), - не беспокоиться о людях, у которых отключен JavaScript. Отобразите сообщение в теге <noscript>, информирующее пользователя о том, что вашему сайту требуется Javascript.

Это затронет две группы людей: тех, кто сознательно отключил JavaScript и предположительно знает, как его включить, и тех, кто просматривает ваш сайт на старом мобильном устройстве.

Подумайте, насколько важны эти группы людей, прежде чем тратить часы и часы на их развитие.

Answer 3

Просто, не используйте синтаксис javascript: URI в качестве href, по крайней мере, не в HTML, доставляемом клиенту.

Доставьте HTML-код с сервера с помощью href, перенаправляя пользователя на любую страницу, на которую вы хотите перейти, а затем замените href (или перехватите событие onclick) для тега привязки и делайте все, что хотите, обязательно предотвращая действие по умолчанию для события пожара.

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

И я полностью согласен с предложением прочитать ненавязчивый JavaScript.

Answer 4

Прочитайте ненавязчивый JavaScript , чтобы узнать, как отделить поведение JS от фактической разметки. Все остальное, что я опубликую, будет лишь повторением того, что кто-то сказал лучше в другом месте

Answer 5

Лучшим вариантом для no-JS, вероятно, будет наличие формы с кнопкой отправки и указание действия формы на вашем URL.

Вы можете стилизовать кнопку так, чтобы она выглядела как ссылка (или как-нибудь еще):

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

В статье Particletree есть хороший пример стиля кнопок: Повторное открытие элемента Button