|
65 / 65 / 47
Регистрация: 04.12.2016
Сообщений: 214
|
|||||||||||||||||||||||||||||||
AJAX - как сделать запрос к PHP-коду без перезагрузки страницы21.12.2016, 01:36. Показов 52864. Ответов 27
Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы вроде "Как выполнить функцию PHP из JavaScript-кода?" или "Как отправить форму без перезагрузки?", она напросилась в этом разделе сама самой.
Итак, AJAX - это Asynchronous Javascript And XML - асинхронный JavaScript и XML, если по-русски. Разберём каждое слово: 1) Асинхронный - это и есть то самое, чего все так хотят - выполнение действий без перезагрузки страницы. Пока JavaScript отправил запрос на сервер, пользователь продолжает выполнять действия на странице, т.к. никаких переходов при отправке запроса не происходит. 2) JavaScript - язык программирования, который используют инструменты для отправки AJAX-запросов. Т.к. статья для новичков, то подразумевается, что вы используете либо только чистый JavaScript, либо в совокупности с jQuery. Если вы не используете jQuery, то для создания такого запроса требуется создание объекта XMLHttpRequest. В jQuery всё немного проще и лаконичнее - вы пользуетесь методами $.post и $.get для отправки соответствующих запросов. Когда нужно использовать post, а когда get - чуть позже. 3) XML - в контексте этой статьи это не так важно, считайте это отсылкой к тому самому объекту XMLHttpRequest, ведь сначала появился именно этот способ. Таким образом, AJAX - это способ отправки запросов (и данных) на сервер без перезагрузки страницы и, как следует, прерывания действий пользователя. О методах GET и POST. Обычно, любой запрос сопровождается некоторыми параметрами. В GET-запросах такие параметры передаются в URL, например: http://site.com/index.php?param1=value1¶m2=value2. Это накладывает два ограничения:1) Объём отправляемых данных существенно ограничен - объём классического GET-запроса находится в диапазоне от 2 до 8 килобайт по умолчанию. 2) Данные открыты - не желательно передавать чувствительные данные, например - пароли. Из-за этого, POST-запросы встречаются намного чаще. У POST-запроса, в отличие от GET, есть тело, которое помещается после заголовка (а GET-запрос имеет только его). Данные тела явно не передаются (относительно - трафик можно прослушать, но это уже вопрос применения шифрования и защищенного канала). Объём информации, который можно передать в теле, опять же, зависит от настроек сервера. По умолчанию, этот объём порядка 20 мегабайт. И, разумеется, можно передавать GET-параметры через URL. В общем случае, POST-запросы являются более гибкими. Теперь рассмотрим отправку этих двух видов запросов с помощью обозначенных выше методов - с помощью объекта XMLHttpRequest и методов jQuery - $.post и $.get. GET-запрос В качестве примера используем следующий "скрипт": hello.php
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая - когда запрос прошел нормально, и когда произошла ошибка. В 10-той строке мы вызываем метод, в который передаём три параметра: 1) "GET" - тип запроса 2) "hello.php?name=Webkill" - URL запроса: файл hello.php и один параметр name. 3) true - асинхронность. Если false - то браузер будет ожидать ответа (синхронность). На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр - null (позже, через этот параметр будут передаваться данные тела POST-запроса). 2) jQuery
1) "hello.php" - часть URL без GET-параметров 2) {name: "Webkill"} - параметры запроса в виде ассоциативного массива (JSON)3) Функция-обработчик, которая вызывается в случае "успеха" POST-запрос Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль. login.php
2) jQuery
Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST - попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную. Естественно, круг задач, для которых используется AJAX намного шире - загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры. Для дальнейшего изучения: jQuery $.post jQuery $.get Русский сайт о XMLHttpRequest
10
|
|||||||||||||||||||||||||||||||
| 21.12.2016, 01:36 | |
|
Ответы с готовыми решениями:
27
Как сделать мультизагрузку фото с ajax и php без перезагрузки страницы? Как организовать ajax-запрос без перезагрузки страницы?! Как сделать запрос по Ajax при нажатии на submit без перезагрузки |
|
461 / 369 / 94
Регистрация: 01.05.2010
Сообщений: 1,761
|
|||||||||||
| 20.02.2017, 18:21 | |||||||||||
|
Ну элемент отпозиционирован абсолютно. Относительно чего? Если выше нет элементов с позиционированием, то скорее всего от body. То есть элемент следует искать вверху документа.
Далее абсолютно позиционированный элемент сходу не имеет размеров. Задайте их явно при помощи ксс свойств width и height. Далее, задайте координаты при помощи свойств left и top. Должно появится ![]() Добавлено через 6 минут А эта функция поможет поместить ваше окно точно по центру
2
|
|||||||||||
|
193 / 140 / 36
Регистрация: 19.11.2020
Сообщений: 881
|
||||||||||||||||||||||||||||||||||||
| 19.07.2021, 18:45 | ||||||||||||||||||||||||||||||||||||
|
Эмм. Статья не о чём. Давайте я научу вас, как жить в кайф.
Первым делом, подключаем jquery-3.6.0.min.js Но одним им, не будешь сыт. Нужно автоматизировать подключения всех <form> на странице. - Для этого, я написал самый простой скрипт Кликните здесь для просмотра всего текста
Всё, готово в JS. Перейдём в HTML реализуем тестовые формы на странице Кликните здесь для просмотра всего текста
Как видим, тут список довольно обширен. Мы сразу можем передавать файлы, получать значения от PHP коллбэка. И так далее. Теперь, приступим к PHP Кликните здесь для просмотра всего текста
Да, понимаю. Вы сейчас ударили себя по лицу, и сказали - а что??? Так можно было???! И начали тихо плакать. Я скажу, можно!
Кликните здесь для просмотра всего текста
Готово! Вы используете универсальный API который даёт вам не париться. Но вы скажите, я всё равно парюсь, не хочу париться над выводом в нужный id!. Вот, держите. Она автоматически расставит key в нужные id если таковы есть
4
|
||||||||||||||||||||||||||||||||||||
|
193 / 140 / 36
Регистрация: 19.11.2020
Сообщений: 881
|
|||||||||||||||||||||
| 08.09.2021, 21:01 | |||||||||||||||||||||
|
FIX моего недостроя по блегчённому API для сайтов
Кликните здесь для просмотра всего текста
api_functions.php - Убрана $_request в пользу REQUEST_METHOD для получения из $_POST и $_GET исключая $_COOKIE - Переименован последний параметр для LoadFilesFromDir и добавлен собственный разделитель Кликните здесь для просмотра всего текста
send.js - Работает GET запрос у <form method="GET"> - Добавлен параметр атрибут PreСall, который срабатывает перед вызовом. > Данный аттрибут полезен для проверки данных перед отправкой, или записи в form каких то данных из внешних данных, в невидимые поля hidden input Кликните здесь для просмотра всего текста
Пример PreСall
4
|
|||||||||||||||||||||
|
132 / 76 / 16
Регистрация: 08.07.2022
Сообщений: 309
|
||||||||||||||||||||||||||||||||||||||||||
| 08.02.2023, 01:53 | ||||||||||||||||||||||||||||||||||||||||||
|
Кликните здесь для просмотра всего текста
Файл script.js
Форма
А так же изюминка
1
|
||||||||||||||||||||||||||||||||||||||||||
|
132 / 76 / 16
Регистрация: 08.07.2022
Сообщений: 309
|
|
| 09.02.2023, 21:11 | |
|
1
|
|
|
132 / 76 / 16
Регистрация: 08.07.2022
Сообщений: 309
|
||||||||||||||||
| 14.02.2023, 23:26 | ||||||||||||||||
|
Пример рандомной смены картинок раз в 5 секунд
Форма Кликните здесь для просмотра всего текста
JS скрипт Кликните здесь для просмотра всего текста
PHP скрипт Кликните здесь для просмотра всего текста
По вопросу Смена картинки через 5 секунд
1
|
||||||||||||||||
|
132 / 76 / 16
Регистрация: 08.07.2022
Сообщений: 309
|
|
| 14.02.2023, 23:30 | |
|
Не закрепилось
1
|
|
|
6 / 5 / 2
Регистрация: 08.09.2015
Сообщений: 95
|
|
| 24.01.2024, 17:16 | |
|
Интересная тема, спасибо.
Минус только в том, что не очень подробно. То есть написано не на уровне начинающего, а выше.
0
|
|
| 24.01.2024, 17:16 | |
|
AJAX. Как сделать так, чтобы данные обновлялись в таблице без перезагрузки страницы? Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек) Загрузка контента без перезагрузки страницы Php Mysql AJAX
Как заставить этот код работать без перезагрузки страницы (ajax) Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
тв 16 бой ии
anaschu 27.07.2026
Великий Перелом ИИ: Как уравнения ОДУ Radau дожали цензурные фильтры Алисы
Фиксируем в мемофонде Теории Всего беспрецедентный факт в истории ИИ-зондирования. В затяжном многораундовом. . .
|
мв 15. непроверенное, возможно, глюк
anaschu 27.07.2026
НАУЧНО-АНАЛИТИЧЕСКИЙ ОТЧЕТ. РАЗДЕЛ 1. 1: «НАУКА» (РАСШИРЕННАЯ СТЕХИОМЕТРИЧЕСКАЯ И ГЕНЕТИЧЕСКАЯ ВЕРСИЯ)Тема: Теоретическое обоснование инвариантности 19-мерного тензорного ядра непрерывных ОДУ и. . .
|
Очистка реквизитов и табличных частей документа при копировании
Maks 26.07.2026
Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРаботу", разработанного в КА2.
Задача: Заменить алгоритм запрета копирования документов для сотрудников с ролью "Стажер",. . .
|
Доктрина интенционального знания - Доктрина для портала "Срез".
Hrethgir 25.07.2026
Может найдётся кто захочет оценить доктрину. . . Написания правил участия для меня роскошь, требующая лимита времени, поэтому все сообщения не прошедшие модерацию будут видны только участникам портала,. . .
|
|
сукцессия 44. Решил подать на припринт в межународные сервисы препринтов. Но нужно одобрение от ученых
anaschu 25.07.2026
Английский вариант. Пока кто то не одобрит мою личность, мне не получиться это опубликовать на препринте. Но заявку на публикацию статьи я сегодня подам.
|
сукцессия 43. Вторая научная статья за месяц- прайминг и гатгил
anaschu 25.07.2026
две стороны одной монеты
|
Более приземисто - Эстафету хвоста в .cdl (деревья эстафеты в сад).
Hrethgir 24.07.2026
В будущем, после написания блока инверсии обхода дерева (эстафеты хвоста), я планирую вернуться к нашему прошлому разговору о том, обладают ли знания целеполаганием. Тогда я пришел к выводу, что. . .
|
Вот представьте что вам дали бессмертие.
kumehtar 24.07.2026
Вот представьте что вам дали бессмертие, ничего более не меняя. Вообще ничего, только бессмертие в нынешнем виде. Рады были бы? Что бы вы тут делали всё это время?
Никакой пенсии. Никакого нового. . .
|