PHP и AJAX для начинающих на простом примере
Что такое jQuery?
jQuery это библиотека javascript, цель которой «пиши меньше, делай больше». jQuery легко подключить к сайту и начать использовать. С помощью jQuery становится намного проще использовать javascript на вашем сайте.
jQuery устраняет целую прорву строк кода javascript, и позволяет реализовать эту прорву строк всего одним методом.
Что такое AJAX?
Что насчет jQuery и AJAX?
Комбинация jQuery и AJAX обеспечивают мощную функциональность. С помощью jquery и ajax вы можете сделать запрос и получить информацию в различных форматах, включая XML, HTML и даже обычный текст. Для обмена данными можно использовать формат JSON. Данные полученные по ajax запросу мы можем использовать в нашей html странице.
jQuery обеспечивает простую и мощную функциональность, которая расширяет javascript AJAX методы и обеспечивает более гибкий подход.
В этой небольшой статье я покажу вам, как использовать jQuery и AJAX в простой php форме. Давайте начнем. Чтобы использовать jQuery и AJAX нам потребуются два файла, в первом файле будет находиться код html/php, посредством которого и будет составляться ajax запрос. Во втором файле мы будет обрабатывать ajax запрос и возвращать результат на первую страницу.
Шаг 1. Создайте файл school.php и вставьте в него следующий код:
Шаг 2: Создайте details.php и расположите в нем следующий код:
В приведенном выше коде мы получаем адрес студента с помощью порядкового номера и его имени.
Как отправить HTML-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
В этом уроке мы наглядно проиллюстрируем, насколько просто получить доступ к информации из базы данных с помощью AJAX, мы собираемся создавать запросы MySQL на лету и отображать результаты в виде таблицы HTML.
Пример работы с Ajax, PHP и MySQL
В следующем примере показано, как веб-страница может получать информацию из базы данных с помощью AJAX. Вы можете из выпадающего списка выбрать одного из клиентов и увидите, что, без перезагрузки страницы, необходимая информация будет отображаться ввиде таблицы HTML:
Example
Таблица примера работы с Ajax и MySQL
В базе данных demo создадим таблицу ajax_demo:
Пример
Теперь выгрузите следующие данные в эту таблицу, используя следующие операторы SQL:
Пример
В результате мы получим следующую таблицу, которую будем исползовать в этом уроке:
Объяснение примера работы с Ajax и MySQL
Функция showUser() запускается событием onchange :
Пример
Сначала проверим, выбран ли человек из списка. Если никто не выбран (str == «»), то очистим содержимое элемента с и выйдем из функции. Если же человек выбран, то выполним следующие шаги:
Файл-обработчик для работы с Ajax и MySQL
Страница на сервере, вызываемая выше приведенным JavaScript, представляет собой PHP-файл «getuser.php».
Исходный код в файле «getuser.php» выполняет запрос к базе данных MySQL и возвращает результат в таблице HTML:
Пример
Объяснение кода: Когда запрос отправляется из JavaScript в файл PHP, происходит следующее:
jQuery AJAX Form Submit PHP MySQL
Simple jquery ajax form submit in PHP + MySQL + validation. In this tutorial; you will learn how to create and submit simple ajax form in PHP, and how to submit form data into MySQL database without the whole page refresh or reload. And also you will learn how to show validation error message to the user if the user does not fill any form field.
Here you will learn how to send data to MySQL database using AJAX + jQuery + PHP without reloading the whole page and show a client-side validation error message if it has an error in the form.
This tutorial helps you step by step for creating or submit ajax form in PHP with MySQL DB. When we store a form of data into MySQL database after that we will show a success message for the user. The message looks like “Your form has been successfully submitted using ajax in PHP with MySQL DB”.
jQuery AJAX Form Submit In PHP + MySQL Example
Follow the below given steps to easily create and submit ajax form in PHP + MySQL with client-side validation:
First of all, go to your PHPMyAdmin and create a table name customers with the following fields: name, email, mobile.
1. First Create a Database Connection File
In this step, you will create a file name db.php and update the below code into your file.
The below code is used to create a MySQL database connection in PHP. When we insert form data into MySQL database, there we will include this file:
2. Create An Ajax Form in PHP
In this step, you need to create an ajax form and update the below code into your ajax-form.php file.
3. Create Ajax Form PHP File
Now we will create a new file name ajax-form-store.php and update the below code into your ajax-form-store.php file.
The below code is used to store form data into a MySQL database table name customers. If form successfully submitted to the database, it will return success message otherwise it returns an error.
Conclusion
In this tutorial, you have learned how to create and submit ajax form and store data into a MySQL database without reloading or refreshing the whole web page with client-side validation.
Простые примеры работы jQuery, Ajax и PHP
1. Создаём простой AJAX запрос в jQuery
Пример всего из двух файлов.
Код HTML (index.html)
Код PHP (файл example.php)
Смотрим как работает!)
Сначала коротко о методах.
| Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса. Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет). Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно. Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой. |
С помощью данного кода можно установить, например, анимированное изображение (часы, круг, линия и тд), которое будет отображаться в процессе загрузки и закрываться в случае конца процедуры.
3. Пример отправки данных из формы и полей ввода jQuery + Ajax + PHP
Код HTML (index.html)
Код PHP (файл example.php)
Смотрим пример работы!
Поскольку это практически готовая форма обратной связи, то вот ссылка того, как отсылать письма на php.
Ещё буду дополнять примерами! Если есть пожелания, пишите в комментариях!