AJAX — как сделать запрос к PHP-коду без перезагрузки страницы
Эта тема имеет больше общего с 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-запросах такие параметры передаются в 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.
В качестве примера используем следующий «скрипт»:
$name = $_GET['name']; echo "Hello, $name!"; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } else { alert('Произошла ошибка!'); } }; xmlhttp.open("GET", "hello.php?name=Webkill", true); xmlhttp.send(null);
В строке один происходит создание объекта. Во второй мы присваиваем этому объекту свойство onreadystatechange — функцию, которая будет выполнена, когда
будет получен ответ на запрос. Такая функция называется callback (колбэк). В ней мы обрабатываем два случая — когда запрос прошел нормально, и когда произошла ошибка.
В 10-той строке мы вызываем метод, в который передаём три параметра:
1) «GET» — тип запроса
2) «hello.php?name=Webkill» — URL запроса: файл hello.php и один параметр name.
3) true — асинхронность. Если false — то браузер будет ожидать ответа (синхронность).
На 11-ой строке происходит отправка запроса, при этом мы указываем один параметр — null (позже, через этот параметр будут передаваться данные тела POST-запроса).
$.get("hello.php", {name: "Webkill"}, function(data) { alert(data); } );
Собственно, отправка GET-запроса в jQuery заключается в вызове метода $.get с тремя параметрами:
1) «hello.php» — часть URL без GET-параметров
2) — параметры запроса в виде ассоциативного массива (JSON)
3) Функция-обработчик, которая вызывается в случае «успеха»
Допустим, нужно сделать аутентификацию без перезагрузки страницы. GET-запрос не подходит, т.к. передаётся пароль.
$login = 'Webkill'; $pass = 'qwerty123'; if($_POST['login'] == $login && $_POST['password'] == $pass) { echo 'Добро пожаловать!'; } else { echo 'В доступе отказано.'; } var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { alert(this.responseText); } else { alert('Произошла ошибка!'); } }; xmlhttp.open("POST", "login.php", true); xmlhttp.send({login: inputLogin, pass: inputPassword});
Легко заметить, что в целом код не изменился. Поменялся только первый параметр функции open — тип запроса, и теперь мы передаём данные в метод send в формате JSON.
$.post('login.php', {login: inputLogin, pass: inputPassword}, function(data) { alert(data); } );
Снова, изменений немного: только название метода говорит о том, что в этот раз мы шлём POST-запрос. В случае GET-запроса параметры, которые мы передаём в JSON, закодируются в URL, а в случае POST — попадут в тело запроса. Если вы хотите использовать GET-параметры в POST-запросе, то необходимо их писать в URL вручную.
Естественно, круг задач, для которых используется AJAX намного шире — загрузка файлов, игры и т.д. Целью этой статьи является ознакомление с этим комплексом технологий. Стоит отметить, что в случае jQuery можно обрабатывать намного больше вариантов ответа сервера с помощью функций done, fail и always. Также, функции-обработчики кроме собственно ответа принимают и другие параметры.
Помогите разобраться с Action в form?
Собственно, вопрос такой: пользователь вводит свои данные (логин и пароль) на index.php, к примеру. Каким образом необходимо задать action и организовать авторизацию, чтобы не перенаправлять авторизацию в другой файл, а обработать ее в index.php?
Что-то такого типа? То есть, по нажатию кнопки, будем вызывать php-функцию внутри index.php?
onsubmit – событие javascript и никакого отношения к PHP не имеет.
Что касается вашего вопроса, то разместите код проверки логина в index.php.
Ваша форма:
По нажатию на «Enter», Форма будет отправлять, Но php не будет обрабатывать. Как это можно исправить?
Помоему автор не совсем удачно задал вопрос.
Для любого программиста замена action и «не перенаправлять авторизацию в другой файл, а обработать ее в index.php» означает: вместо запроса к login.php сделать запрос к index.php и внутри него подгрузить модуль авторизации.
В этом случае ответ DevMan вполне себе приемлемое решение.
Но наличие onsubmit=«check_dataLogin()» настораживает и наводит на мысль, что автор все таки хочет прикрутить авторизацию через ajax.
Конкретные примеры кода приводить не буду, ибо вы не указали пользуетесь каким либо JS фреймворком или пишите все от руки в ноутпэде.
Могу только обратить внимание на несколько подводных камней.
1. ваша функуция check_dataLogin() должна всегда возвращать false, в противном случае после того как она отработает бразуер пошлет стандартный post запрос на сервер (не ajax)
2. оставьте form action=login.php. это ваш fallback на случай если в браузере отключен JavaScript.
3. результат у login.php должен личный для обыного post запроса и для ajax: может быть редирект на index.php, либо снова форма логина ( если пароль не верный), или же json для вашего ajax запроса (а может и не json, как реализуете так и будет)
П.С. Я человек новый на хабре и не совсем уверен что в Q&A это у местно, но в мирей айти есть некая этика как задавать вопросы. Практически на всех irc каналах или maillist, в которых я учавствую, подобный вопрос могут проигнорирывать или заклевать вас за «отсутсвие культуры общения». Если повезет с вами сыграют в 10 вопросов, пытаясь выяснить чего же вы все таки добиваетесь.
Для того чтобы вам помогали, ответы были развернутые и быстрые, научитесь формулирывать вопросы в понятной для других форме. Ведь не даром говорят что правильно поставленный вопрос содержит в себе половину ответа.
может это поможет вам goo.gl/EiskH
и еще (без перевода прадва) whathaveyoutried.com
Спасибо!
Очень развернутый ответ! 🙂
К теме Q&A. Я не очень хорошо владею терминологией в веб-разработке. Поэтому вопрос показался, наверное, некорректным. Я попробую еще раз:
на одном из своих проектов я делал авторизацию таким образом:
Файл authorization.php
0) < $_SESSION['flag'] = true; $_SESSION['user'] = $_POST['login']; $_SESSION['password'] = md5($_POST['password']); $login = $_SESSION['user']; $adminLogin = "admin"; if($login == $adminLogin ) < echo " "; > else echo " "; > else < echo " Authorization An incorrect user name or password.
"; > ?> Такой подход создает очень много php-файлов с одной функцией. Я и подумал: «а что если авторизовывать пользователя в том же php-файле, не создавая кучу этих самых файлов с одной функцией?»
Событие onsubmit
Событие onsubmit возникает при отправке формы, это обычно происходит, когда пользователь нажимает специальную кнопку Submit.
Синтаксис
Значения
Значение по умолчанию
Применяется к тегам
Пример
function deleteName(f) Выберите пункт для удаления
Чебурашка
Крокодил Гена
Шапокляк
В данном примере при отправке формы будет выведено диалоговое окно (рис. 1). При нажатии на кнопку ОК форма будет отправлена на адрес, заданный атрибутом action , а при нажатии на кнопку Отмена данные формы передаваться не будут.
Рис. 1. Использование события onsubmit
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
How to handle form submission?
I’m stuck up at the following place: How to handle the form submission. Where should I place the code that calls the javascript’s validate function and later calls the storeInDB() function.
Please provide me some suggestions on how do I achieve this and is this approach good? Thanks a lot in advance.
2 Answers 2
You should use the wp_ajax or the wp_ajax_nopriv function.
First of all you should put the the admin ajax url as the action attribute value in the submission form.
That way the the form will be submitted to the admin-ajax.php by default (without JavaScript). You can use JavaScript to make it work using AJAX.
Next is the function that will use the submitted data. Inside the form, put a wp_nonce_field and a hidden input with the name action. My action value is add_transfer .
You can put the function that will handle this form in the functions.php or in your plugin file. You can use wp_ajax_ + the action name if this is a form only for logged in users. For non logged in users, use wp_ajax_nopriv + the action name instead.
add_action('wp_ajax_add_transfer', 'process_add_transfer'); function process_add_transfer() < if ( empty($_POST) || !wp_verify_nonce($_POST['security-code-here'],'add_transfer') ) < echo 'You targeted the right function, but sorry, your nonce did not verify.'; die(); >else < // do your function here wp_redirect($redirect_url_for_non_ajax_request); >>