Ajax и XML Използване на Ajax във формуляри

Създаване на формуляри за въвеждане с Ajax

Серия съдържание:

Това съдържание е част 1 от серия # статии: Ajax и XML

Това съдържание е част от поредицата: Ajax и XML

Следете за още статии от тази поредица.

Пример за използване на Ajax в проста форма за въвеждане на данни

Нека започнем с един много прост пример: да речем, че имаме регистрационен формуляр, съдържащ няколко полета, които искаме да изпратим на сървъра с помощта на Ajax, вместо обичайния уеб метод. Самата страница на формуляра е показана в Листинг 1.

Листинг 1.index.html

Първият параметър при извикване на Ajax.Updater е идентификаторът на маркера

Скриптът add.php е показан в Листинг 2.

Листинг 2.add.php

Скриптът просто показва съдържанието на формуляра. В действителност ще се изисква нещо повече, например, добавете запис към базата данни, но можете да приложите тези действия сами, ако искате.

Когато формулярът се зареди за първи път в браузъра, страницата ще изглежда нещо като Фигура 1.

Фигура 1. Пример за проста форма на Ajax

Чрез натискане на бутона Изпращане данните се изпращат към сървърния скрипт add.php, който връща HTML фрагмента, поставяйки го точно под Изпращане (снимка 2).

Фигура 2. Показване на резултата

Вариант на тези HTML форми са формулите за автоматично довършване на Ajax, които автоматично променят стойностите на някои полета въз основа на стойностите на определени ключови атрибути. Типичен пример е въвеждане на идентификатор на клиент и щракване върху бутон, в резултат на което останалите полета ще бъдат автоматично попълнени с информация за този клиент.

Пример за формуляр за автоматично попълване е показан в листинг 3.

Листинг 3.index.html

Манипулаторът на събитието onSuccess, предаден като параметър в извикването Ajax.Updater, използва функциите на обектния модел на документ (DOM), поддържани от всички браузъри, за да анализира получения XML документ. След това запълва стойностите на елементите с идентификатори elFirst, elLast и elEmail с данни от XML.

Страницата getdata.php е показана в листинг 4.

Листинг 4. getdata.php

При първото стартиране страницата трябва да изглежда като Фигура 3.

Фигура 3. Формуляр с пълнеж

Фигура 4. Останалите полета на формуляра се попълват в резултат на скрипт, който приема ID като параметър

Като следващ трик с Ajax ще създам актуализируем списък със задачи.

Списъци за актуализиране на място

Един често срещан пример, използван за представяне на Ruby on Rails, са списъците със задачи, които се актуализират на място. С други думи, представете си списък в горната част на страницата и текстово поле под него. Ако въведете малко текст в това поле и щракнете върху бутона Изпращане, тогава нов елемент автоматично ще бъде добавен към списъка без презареждане на страницата. Текстовото поле от своя страна ще бъде изчистено, за да можете да продължите да добавяте елементи с лекота.

Всъщност това е много трудна задача, затова реших да демонстрирам нейното решение в PHP. Листинг 5 показва страница, съдържаща списък със задачи.

Листинг 5.index.php

Вместо да съхранявам елементите от списъка в база данни, използвам прост текстов файл list.txt, който изброява всички записи (по един на ред). По този начин всичко, което е необходимо за попълване на списъка с данни, е да отворите файла, да прочетете записите и да ги поставите вътре в елемента.

Скриптът add.php е показан в листинг 6.

---