LINUX.ORG.RU

Реализация кнопки «Like» без JS

 , , , ,


1

1
  1. Делаем обычную кнопку:
    <form method="post" action="/path/to/like/somePost123456">
    	<input type="submit" value="Like" />
    </form>
    
  2. На сервере, при обработке запроса, возвращаем статус «204 No Content»:
    // handleLikes handles POST requests at /path/to/like/:postID.
    func handleLikes(w http.ResponseWriter, r *http.Request) {
    	// Do something meaningful with the request here...
    
    	// Return the HTTP status number 204.
    	w.WriteHeader(http.StatusNoContent)
    }
    
  3. Декорируем кнопку из пункта 1 с помощью CSS, чтобы после нажатия она становилась неактивной.
  4. Профит. Страница после нажатия не перезагружается, лайки работают, как если бы был JS.

Вопрос: можно ли ещё с помощью каких-нибудь (помимо JS) ухищрений прозвести частичную перерисовку страницы? В данном случае это необходимо, например, чтобы показать количество лайков или отобразить, что запрос до сервера таки дошёл. Какая-нибудь фича SVG, XML? Ничего там не предусмотрено для этого? Почему iframes не популярен для данных целей, учитывая, что в HTTP/2 количество запросов к серверу не принципиально?

можно ли ещё с помощью каких-нибудь (помимо JS) ухищрений прозвести частичную перерисовку страницы?

iframe

i-rinat ★★★★★
()
Ответ на: комментарий от i-rinat

Вопрос - отчего их более широко не используют? Для кнопок типа thumbs up/down - самое оно же, не? Работает даже с выключенным JS. HTTP/2 решает проблему множественных запросов к серверу и излишне толстых заголовков. Для большей плавности-юзабильности можно повесить скрипт, который будет подменять отправку формы во фрейме на ajax запрос и перерисовку DOM нужного объекта. Progressive Enhancement во все поля.

KanikulyKun
() автор топика
Ответ на: комментарий от KanikulyKun

Вопрос - отчего их более широко не используют?

Всё равно понадобится AJAX, и выйдет две сущности вместо одной.

Плюс у фреймов могут быть проблемы с отображениями в браузерах.

i-rinat ★★★★★
()
Последнее исправление: i-rinat (всего исправлений: 1)
Ответ на: комментарий от i-rinat

Всё равно понадобится AJAX, и выйдет две сущности вместо одной.

Под AJAX частью я подразумевал не написание дублирующего кода руками, а типа «smooth page preloading» скрипт (не могу сейчас найти), который подключается сверху страницы и автоматически переписывает всю навигацию на сайте таким образом, как будто у тебя AJAX навигация во все поля - как при переходе между страницами на Ютюбчике. Вот тоже самое, только для iframe'ов...

В HTML5, кстати, был добавлен аттрибут srcdoc для iframe. Очень любопытная вещь. Позволяет задать нужный html нашей like кнопки прямо в коде родительской страницы. Так что дополнительные запросы куда либо вообще не требуются. Side effect - работа кнопки очень похожа на простое шатание DOM'а JS'ом. Засирания истории браузера не наблюдается. Один недостаток - IE / Opera Mini.

KanikulyKun
() автор топика
Ответ на: комментарий от emptykiev

кстати, попрошу от вас минимальный пример с неперезагружаемой страницей, а то как-то не верится что форма отправляется без перезагрузки, может вы какой-то плагин подключили и сами не заметили?

emptykiev
()
Ответ на: комментарий от KanikulyKun

может лучше кнопка лайк без моска? редирект обратно на страницу с кнопкой спасет отца демократии, без жс никак не получится, ну никак блин вообще, откуда вы только лезете, дали вам панацею, нет, не хотим, ко-во запросов у него непренципиально по квантовому каналу епта.

emptykiev
()

Так раньше делали, никаких плюсов и довольно много минусов (например, неудобно рисовать состояние «идёт запрос»; переход назад внутри iframe непонятно что должен делать и т.д.)

Зачем?

HTTP/2 количество запросов к серверу не принципиально?

Ложь.

x3al ★★★★★
()
Ответ на: комментарий от KanikulyKun

Работает даже с выключенным JS

За окном 2017 год, JS выключен только у устаревших ботов.

x3al ★★★★★
()

Вопрос: можно ли ещё с помощью каких-нибудь (помимо JS) ухищрений прозвести частичную перерисовку страницы?

Картинки же. Например, делаем на странице img src=«/число_лайков.пнг» и форму post action=«/число_лайков.пнг» target=«невидимый ифрейм». Сервер отдаёт картинку и по GET и по POST, но во втором случае инкрементирует счётчик и выдаёт новую картинку с числом. Браузер после отправки формы перерисует img. Идею не тестировал.

legolegs ★★★★★
()
Последнее исправление: legolegs (всего исправлений: 1)
Ответ на: комментарий от KanikulyKun

Вопрос - отчего их более широко не используют?

Потому что XSS. Я писал обертку для-таки разрешения запуска скриптов со стороннего сервера в iframe. Заработало, но гемор.

bvn13 ★★★★★
()
Ответ на: комментарий от emptykiev

Ну ты тупой. Тебе даже ссылку дали на описание HTTP статус кодов. Но когда нам читать, вякать то прямо сейчас хочется.

KanikulyKun
() автор топика
Ответ на: комментарий от KanikulyKun

Ссылка-то с прототипом будет, за слова отвечаешь? Даже объяснять не хочу, все мы такими были, это пройдет.

emptykiev
()
Ответ на: комментарий от KanikulyKun

Ты ж даже не понимаешь как браузер работает, думаешь что форма как-то волшебно отправляется и браузер оставаясь на странице понимает что там НОУ КОНТЕНТ и не переходит, ты вообще понимаешь что запрос уже после перенаправления сработает? Но ты же сферический пхпшник, и в твоем мышлении переход это redirect("http://foo") в скрипте, а раз там НоУ КОНТЕНТ то и переходить некуда? Ты смешной.

emptykiev
()
Ответ на: комментарий от emptykiev

Да не, всё он правильно говорит, браузер не перезагружает страницу даже при type="submit". Для теста открой вот это и консоль разработчика и кликни на 204-й статус. Запрос уйдёт, страница не перезагрузится.

Вопрос в другом — стоит ли оно того против использования удобного ajax? Мы имеем всё тот же запрос, всё то же самое, только без js. Лично я не вижу особых плюсов, только just4fun.

conformist ★★★
()
Ответ на: комментарий от KanikulyKun

Оттого что количество идиотов в мире превышает 98%

Goury ★★★★★
()
Ответ на: комментарий от legolegs

Ифреймы не предназначены для таргетирования.
И ничто не мешает ту же картинку повесить под инпут в том же ифрейме. Получается вообще предельно просто.

Goury ★★★★★
()
Ответ на: комментарий от bvn13

Какую к чертям обёртку?
В заголовки научись

Goury ★★★★★
()
Ответ на: комментарий от conformist

Оно — нет.
Форма в ифрейме — стоит.

Goury ★★★★★
()
Ответ на: комментарий от conformist

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

emptykiev
()
Ответ на: комментарий от emptykiev

Профит. Страница после нажатия не перезагружается, лайки работают, как если бы был JS.

Речь о том, что можно это сделать без js, а не о том, что у кого-то прокси неправильно работает.

conformist ★★★
()
Ответ на: комментарий от emptykiev

можно сделать ифрейм и возвращать всю кнопку с нужным кол-вом лайков, как вариант.

AndreyKl ★★★★★
()
Ответ на: комментарий от emptykiev

no content вполне себе стандартный заголовок, вроде как даже ие его поддерживает. пользуются люди.

другой вопрос что это всё странно: генерировать картинку (или html) вместо того чтобы просто сменить циферку яваскриптом.

AndreyKl ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.