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
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.
В этом уроке мы наглядно проиллюстрируем, насколько просто получить доступ к информации из базы данных с помощью 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, происходит следующее:
Как отправить HTML-форму без перезагрузки страницы
Что такое AJAX
При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.
Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.
Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax
Здесь мы создадим демо-проект, который будет включать в себя 3 файла:
Создайте первый файл под названием index.php с таким содержимым:
Выводы
Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.
Работа с Ajax, PHP и MySQL
Предисловие
Давайте погрузимся и исследуем, как это работает.
MySQL Table
Ниже приведена структура таблицы MySQL, которую мы использовали.
Пользовательский интерфейс для предоставления данных
У нас есть простой пользовательский интерфейс, созданный с использованием HTML и CSS, где пользователь может вводить данные в поле ввода.
HTML-код
Это основной HTML-код. Впрочем, мы внесем в него изменения и добавим код JavaScript позже.
Ниже приведен скриншот того, как это выглядит
Отправить данные на сервер с помощью Ajax
Теперь мы создадим код JavaScript для отправки данных на сервер. И мы назовем этот код в событии onkeyup указанного поля ввода.
Объяснение приведенного выше кода
Значение поля ввода, id которого равен ‘book’, собирается.
Переменная xhr объявлена. Затем создается новый объект XMLHttpRequest. Если ваша целевая аудитория использует браузеры старше Internet Explorer 8, ActiveXObject используется для создания XMLHttpRequest.
Данные будут отправлены с использованием значения «data» с использованием строки book_name, а переменная book будет содержать данные, предоставленные пользователем.
Используя метод open объекта XMLHttpRequest, инициализируется новый запрос к серверу. Этот метод передает три параметра. «POST» определяет тип httprequest. ‘book-Suggestion.php’ устанавливает файл на стороне сервера, а третий параметр ‘true’ указывает, что запрос должен обрабатываться асинхронно.
В случае асинхронных запросов вы получаете обратный вызов после получения данных. И, в свою очередь, пока ваш запрос обрабатывается, браузер может продолжать работать в обычном режиме.
Метод setRequestHeader используется для установки значения заголовка HTTP-запроса. Два параметра передаются вместе с этим методом. «Content-Type» указывает заголовок строки (точнее говоря, DOMString), а «application / x-www-form-urlencoded» устанавливает тело заголовка.
Метод send используется для отправки данных, содержащихся в переменной data, на сервер.
Обработка данных на стороне сервера
Пояснение к коду
Этот код включает файл dbopen.php, который открывает соединение с базой данных MySQL.
Таким образом, мы собираем данные (предоставленные пользователем), отправляемые через Ajax в PHP.
Мы запускаем запрос MySQL, чтобы выбрать все книги, начиная с буквы, предоставленной пользователем, и подготовить данные, которые будут возвращены для отображения.
Получать и отображать данные с помощью Ajax
Теперь нам нужно извлечь данные, возвращенные MYSQL, и отобразить эти данные с помощью Ajax. Итак, мы напишем этот код в нашем HTML-файле. Мы добавим следующий код
Мы должны добавить
Объяснение кода Ajax
Мы проверяем, равно ли значение свойства readyState 4, что означает, что операция завершена.
Если операция завершена, проверяется состояние ответа на запрос. Возвращает код результата HTTP. Код результата 200 указывает, что ответ на запрос успешен.
Итак, окончательный код JavaScript HTML-файла выглядит следующим образом:
Мы рекомендуем вам поиграть с кодом, высказать свое мнение в разделе комментариев и поделиться этим руководством.
Ajax-форма без перезагрузки страницы
Обратная связь на сайте, перезагружающая страницу после каждой успешной отправки — мелочь, которая легко портит впечатление о сайте. Качественный сайт подобных «дырок» содержать не должен, потому разберём простой пример формы с асинхронной отправкой данных (без перезагрузки страницы) через AJax и JQuery.
Отправка формы без перезагрузки страницы:
Как отправить форму без перезагрузки всей страницы? Просто отправлять нужные данные на сервер отдельными запросами, не затрагивая html.
AJAX + PHP + JQuery
Обычно «фидбэк» состоит из HTML-разметки, простенького скрипта, отправляющего данные на сервер и PHP-обработчика этих данных. В случае с фоновой отправки нам понадобится настроить ассинхронную отправку данных к обработчику. Самая простая связка для форм без перезагрузки страницы это PHP + Ajax.
Итак, чтобы отправить форму без перезагрузки дополнительно понадобится:
Функцию Ajax можно использовать не только создания форм, но и для других задач, например для динамической подгрузки новостей на странице.
Готовая схема выглядит так:
Пользователь нажатием кнопки отправляет данные
файл JS отправляет их в PHP через Ajax, функцию JQuery
обработчик.PHP проверяет данные и возвращает пользователю через тот же скрипт сообщение об ошибке или успехе
в первом случае владелец сайта также получает готовую заявку.
Если необходимо исключить вероятность повторной отправки формы, ее можно скрыть.
Инструкция по созданию формы без перезагрузки
Прежде всего подключаем JQuery — вставляем строку в конце head сайта (перед тегом ).
Делаем простую форму (в тегах закрыты комментарии к коду, их желательно удалить):
Собираем Java-Script. Его, можно добавить вместе с HTML кодом выше или загрузить отдельным файлом без первой или отдельной строки.
Обработчик, в JS элементе выше мы уже назвали его formx.php:
Файл formx.php закидываем в корневой каталог сайта (или прописываем соответствующий путь в url: нашего скрипта. JS-код размещается либо в head страницы, либо вместе с html.
Как видите, всё довольно просто — сделав всё в точности по инструкции, Вы получите простую, но рабочую форму на JQuery без перезагрузки страницы. Если что-то не получилось — задавайте вопросы в комментариях ниже, мы поможем.
Асинхронная отправка — далеко не всё что потребуется сделать, если Вам нужна крутая и красивая форма без перезагрузки страницы. Обязательно придётся подключать стили оформления, настраивать скрытие отправленной формы, показа сообщений об успехе/отказе. Не говоря уже о валидации полей, масках полей, интеграциях с CRM, отправке достижения целей в метрику и настройке капчи.
Зато всё это делается в нашем конструкторе форм буквально в пару кликов и совершенно бесплатно (да, бывает и так).