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

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

1 голос
/ 22 января 2009

В настоящее время я использую теги привязки для выполнения запросов 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 / delete / 1 «). Имея это в виду, я не могу изменить href привязки на «/ items / delete / 1», чтобы удовлетворить пользователей отключенным javascript, поскольку это создает угрозу безопасности.

Ответы [ 5 ]

6 голосов
/ 22 января 2009

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

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

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

3 голосов
/ 22 января 2009

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

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

3 голосов
/ 22 января 2009

Простой, не используйте синтаксис 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.

1 голос
/ 22 января 2009

Лучшим вариантом для 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

1 голос
/ 22 января 2009

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

...