Я хочу показать результаты на основе ввода пользователя без перезагрузки страницы! (Для веб-дизайна Wordpress в html?)
пожалуйста, поймите, что я полный нуб в программировании.
Я работаю над страницей моего местного скаутского сообщества, которая позволяет посетителю ввести число (которое представляет возраст их ребенка. Возраст от 0 до 18), который должен что-то привести в движение, чтобы отряд, к которому принадлежит их ребенок, мгновенно появился на странице (без обновления страницы).
Это моя идея: https://i.stack.imgur.com/IzAM6.jpg
(Текст с картинки:)
С левой стороны сверху вниз:
- Посетитель может нажать на мальчика/девочку
- Результаты отображаются сразу после ввода. Без обновления
- Контент загружается после движения вверх
С правой стороны сверху вниз:
- Результат остается на странице до перезагрузки/возврата
О веб-сайте: https://www.eos-sthubertus.nl (сейчас находится на техническом обслуживании, поэтому временно этот веб-сайт заменяет веб-сайт, указанный выше: http://eos.zellez.net)
Мы — местное скаутское сообщество, у которого был очень старый пользовательский интерфейс (выглядящий в 2005 году). Вместе с несколькими другими людьми мы модернизируем веб-сайт и приводим его в соответствие с GDPR.
Ну, я много чего пробовал, но не все получалось. Поскольку у меня нет опыта, я в основном пробовал базовые html-материалы / несколько сложные плагины для WordPress (и редактировал несколько строк кода плагинов, чтобы понять, чего я хочу).
1) в браузере (javascript) поймать событие, чтобы инициировать обновление данных. может быть нажатием кнопки или изменением поля ввода или нажатием клавиши. используйте jquery. 2) отправьте запрос на сервер через ajax wptheming.com/2013/07/пример простого-ajax 3) соберите данные и создайте вывод html на сервере (PHP) 4) получите данные в браузере, в приведенном выше примере успех: функция (данные) {), и отобразите их соответствующим образом используя jquery. у вас есть хорошая коллекция техник, которые вы должны изучить для этой «маленькой» задачи ;-)
@Beatroot спасибо за ответ. Узнать что-то новое не помешает.
Ответы 1
Я не могу дать вам какие-либо конкретные примеры кода, поскольку вы сами не добавили код к вопросу. Это общий учебник jQuery AJAX для WordPress, который должен поставить вас на ноги:
https://premium.wpmudev.org/blog/using-ajax-with-wordpress/
Вы сможете подключить событие javascript к кнопке мальчика/девочки, чтобы вызвать событие:
Добро пожаловать в Stack Overflow! Ожидается, что вы, по крайней мере, попытаетесь закодировать это для себя. Я бы посоветовал вам сделать дополнительные исследования либо через Google, либо с помощью поиска SO, сделать попытку и. если у вас все еще есть проблемы, вернитесь с ваш код и объясните, что вы пробовали.