ajax php mysql редактирование

Простой Jquery скрипт для редактирования HTML5 текста и сохранения с помощью ajax

Очень часто в процессе редактирования контента сайта необходимо (а также очень удобно) видеть готовый результат на странице браузера. Используя свойство тегов HTML5 — contenteditable, Jquery, Ajax и PHP создадим простой редактор текста HTML5 сайта.

Наш редактор будет обладать следующими свойствами:
— при клике мышкой на тексте предназначенном для редактирования этот текст сразу можно редактировать;
— при нажатии клавиши Escape после редактирования текста, все изменения в текущий текст отменяются;
— при потере фокуса, либо клике для редактирования другого текста, измененный текст отправляется на сервер, выводится сообщение о статусе отправки и ответа сервера.

Ниже приводится HTML код редактируемой страницы:

Как видим, каждый редактируемый текст заключен в тег с включенным свойством contenteditable — фишкой HTML5, которая позволяет редактировать текст прямо в браузере. Для сохранения на сервере нужно точно идентифицировать редактируемый текст, поэтому id у нас содержит идентификатор материала и поле базы данных, разделенных нижним подчеркиванием, например — >
Кнопка «сохранить» тут для тех, кто привык нажимать на кнопку сохранить. Никакой особой нагрузки не выполняет, так как, при нажатии на кнопке наш текст теряет фокус и сохраняется (если изменен).

В заголовке нашей страницы подключаем style.css и jquery:

Далее идет собственно и наш скрипт:

Принимаем наш отредактированный текст на сервере — файл save.php

Особенно удобен наш редактор для табличных данных (например прайс), где не нужно текстовое оформление, а необходимо быстро поправить, либо внести новые данные (модернизируем скрипт). Для себя я модернизирую скрипт, чтобы вносить, заполнять базу данных товаров. Заполнять базу таким способом будет также удобно, как в Excel-е, которому мы так привыкли.

Источник

В этом уроке мы наглядно проиллюстрируем, насколько просто получить доступ к информации из базы данных с помощью 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, происходит следующее:

Источник

Добавление и редактирование записей БД через AJAX

Добрый день. Имеется БД, и форма php, которая позволяет выводить базу на экран, добавлять записи, редактировать их и удалять. Вся форма исправно работает.

Как сделать добавление и изменение записей, используя технологию AJAX? Как изменить код, что добавить для этого? С AJAX никогда раньше не работал, и не понимаю как это можно реализовать.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Вставка записей из формы в базу данных через jQuery-AJAX
Добрый день! Я пишу сайт для стоматологического кабинета. Есть форма для записи пациента к врачу, и.

Добавление записи в MySQL по IMG кнопке через AJAX без перезагрузки формы
Пытаюсь сделать добавление записи в MySQL через нажатие собственной IMG кнопки в форме через AJAX.

Добавление, редактирование и удаление записей через форму
Добрый день. Столкнулся с такой проблемой, необходимо писать курсовой по foxpro под руководством.

Добавление, редактирование, удаление записей через форму
Здравствуйте, не могу сделать так что каждый раз при входе на форму не добавлялась новая строка. И.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

ajax редактирование и добавление новостей
У кого то есть код который выводит, редактирует, добавляет новости в базу данных? Или киньте.

Редактирование и добавление записей в БД
Добрый день. Подскажите, пожалуйста. Есть форма «Номенклатура»,на ней DBGrid, в ней есть три поля с.

Добавление, редактирование и удаление записей
Доброго времени суток! У меня на главной странице раздел редактор страниц через switch включен, то.

Источник

Ajax редактирование таблиц и табличных данных

Ссылка на исходники обновлена 25.06.2020 (пока без комментариев)

Привет тебе дорогой читатель, сегодня мы немного поговорим об инлайновом редактировании данных в таблицах без перезагрузки страницы (inline edit ajax).

Как я уже сказал, передо мной встала задача редактирования данных в таблицах. После непродолжительных поисков нашел подходящий вариант, который не использует дополнительные плагины и библиотеки кроме самой jQuery. А таких на самом деле вагон и целая тележка и у каждого есть свои преимущества и недостатки. Один из самых неплохих по функционалу — jqGrid, но о нём мы поговорим в следующий раз.

Представим, что наши данные, по умолчанию, хранятся в базе. В моём примере это будет MySql, обновляться они будут с помощью JS и PHP по технологии AJAX.

AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Итак обсудим то, что у нас имеется, и то, что мы хотим получит в итоге

Исходные данные:

ТаблицЫ с данными, которые генерируются на PHP, запросом из нашей базы данных.
Допустим у нас есть две таблицы: клиенты (clients) и сотрудники (workers)
Поля наших таблиц на самом деле неважно какие, но возьмём для примера такие:

Необходимый результат:

Возможность редактирования всех полей всех таблиц без перезагрузки страницы.

Что нам для этого потребуется?

Приступим к выполнению нашей задачи

Далее присваиваем нашей таблице уникальный идентификатор id, который соответствует названию таблицы в базе (это важно!).
Выводим все строки циклом и присваиваем строкам класс — edit, класс с названием столбца в БД и числовой класс с идентификатором строки в БД.

Далее нам необходим скрипт, который позволит редактировать данные в таблице. Как он работает, я опишу комментариями к каждой строке ниже в коде

Итак форма для редактирования текста у нас появилась, что же мы с ней будем делать дальше?
Теперь нам необходимо сохранять введенные данные при каком то событии, я приведу пример сохранения данных при нажатии Enter.

Также для удобства, добавляем несколько строчек кода, которые убирают наш input при нажатии вне поля ввода, ведь мы можем не захотеть сохранять введенную информацию.

Вам остаётся только обработать полученные данные в файле update_cell.php, все необходимые переменные у Вас есть, пусть это будем вашей самостоятельной работой.
Таким образом мы получаем компактный, универсальный скрипт для быстрого редактирования любых табличных данных.

Если кому нужны будут полные исходники моего варианта скрипта — пишите в коменты.

Дополнение №1

Источник