AJAX. Обмен на данни между клиента и сървъра, качване на файлове на сървъра без презареждане на страницата с помощта на библиотеката jQuery.
Разработете уеб страница, която ви позволява да обменяте данни и да качвате файлове на сървъра, без да презареждате страницата.
Frontend (клиентска страна) - jQuery библиотека версия 1.1.4 и плъгин за нея ajaxUpload;
Бекенд (сървърна страна) - Apache (всяка версия), PHP 5.2.3, MySQL. PHP 5.2.0 представи вградени инструменти за работа с JSON данни, които се използват в този пример, ако имате по-стара версия на PHP, инсталирана на вашия хостинг, тогава ще трябва да напишете тези функции сами.
Блоковата диаграма на скрипта е показана на фигурата (голяма снимка при щракване). Пунктираната линия показва момента на обмен на данни между клиента и сървъра.
Сега същата логика, само на думи:
1. Първо, потребителят попълва формуляра и натиска бутона "Изпрати", след това клиентският скрипт (frontend) изпраща текста от формуляра към сървъра (backend) (предава се само текст, без файл, логиката е проста - защо да изпращате файл, ако вече може да има грешка в текста?).
2. Сървърният скрипт проверява текста за грешки и връща резултата на клиентския скрипт (в този случай в html формат).
3. Клиентският скрипт обработва отговора от сървъра, ако в отговора е изпратена грешка, тогава се показва подходящо съобщение и скриптът излиза, ако няма грешки, тогава клиентският скрипт изпраща избрания от потребителя файл към сървърния скрипт.
4. Сървърният скрипт проверява коректността на файла (размер, тип и т.н.) и връща отговора на клиентския скрипт (този път във формат JSON).
5. Клиентският скрипт обработва получения отговор и извежда съответния резултат на екрана.
Формуляр за заявка (html, add.php файл)
В заглавните тагове включваме библиотеката jQuery, плъгина ajaxUpload и файла с нашия интерфейс:
Следващо тегленеформа за изпращане на текст и файл:
M1 и m2 са две текстови полета, данните от които ще се записват в базата данни на сървъра, img е поле за избор на качен файл, в този пример е разгледана опцията с качване на изображение.
Във входа на типа бутон събитието onclick е зададено на функция, която изпраща данни към сървъра. Тази функция предава съдържанието на текстовите полета и името на формуляра. Самата функция ще бъде описана по-долу.
След това нарисувайте два слоя, единият ще покаже съобщение като „Изчакайте, зареждането е в ход“, второто - всички останали съобщения, включително съобщение за успешното завършване на скрипта:
Изображението loading.gif трябва да е в същата папка като текущия файл (или запишете подходящия път в етикета img).
Това е всичко, няма нищо друго важно във формата за заявка, останалата част от кода в този файл е декорации, които не влияят на работата на примера.
Frontend (Javascript, файл scriptik.js)
Тук са описани само функции от файла scriptik.js, които отговарят за предаване / получаване на данни от сървъра, останалите функции са чисто декоративни по природа и тяхното описание е извън обхвата на тази статия.
Предаваме данните от текстовите полета към бекенд файла insert.php:
Обработка на отговора на сървъра. Логиката на сървърния скрипт е следната: ако са открити грешки в текста, предаван от клиента, тогава в зависимост от грешката ще бъде върнато някакво отрицателно число. Ако няма грешки в предадения текст, тогава в отговора от сървъра ще дойде положително число - идентификаторът на записа в базата данни, с която е записан този текст:
Тоест, ако получим отрицателен резултат, тогава показваме съобщение за грешка, ако получим положителен резултат, тогава започваме да качваме файла на сървъра. Imageupload.php - бекенд, отговорен за качването на файла и неговитеотговарящи на определени изисквания. Използвайки метода GET, на скрипта imageupload.php се предава идентификаторът, под който предаденият текст е записан на сървъра, за да запази файла със същия идентификатор.
Обработваме отговора на сървъра отново, сега отговорът идва във формат JSON, така че променливите, дошли в отговора, могат да бъдат достъпни с помощта на обект като result.var1, result.var2 и т.н.
img_upload е обектът, където се съхранява резултатът. Сървърът изпраща две променливи на клиента: img_upload.result - информация дали изображението е качено или не, img_upload.name - името, под което изображението е записано на сървъра.
Бекенд (PHP, файлове insert.php и imageupload.php)
Тук също са описани само функции за взаимодействие сървър-клиент, описанията на спомагателните функции са пропуснати.
insert.php - проверка за коректност, писане на текста, изпратен от клиента в базата данни и изпращане на отговора на клиента.
За сигурност проверяваме дали заявката идва чрез XMLHttpRequest или не:
Записваме данните в базата данни и връщаме отговора на клиента:
Това всъщност е всичко. Готов да отговори на всякакви въпроси.