✅ Динамично разработване на уеб приложения с Jquery, Php И MySQL

Съдържание

Комбинацията от PHP и Jquery е една от най -използваните техники за разработване на динамични уеб приложения.
Библиотеката JQuery предоставя много Jquery плъгини, които разработчиците използват, за да придадат на приложенията си много динамика, за да подобрят работата на посетителите както в интернет браузъра, така и на мобилно устройство. Ще продължим да разработваме приложението за уроци Генериране на динамични списъци с Jquery, Php и Mysql, ще добавим динамични форми за регистриране и промяна на информацията, прилагайки комбинацията от php и jquery, можем да изпълним тази задача, без да пренасочваме страницата.
Ще добавим и приставката jquery.validator което ще ни позволи да потвърдим полетата на формуляра.
ВниманиеЗа този урок ще ни е необходим плъгинът, който можем да изтеглим от http://jqueryvalidation.org/, когато го изтеглим, го разархивираме и ще имаме всички файлове, от които засега ни интересуват само два, които са:
jquery.validate.js какъв е самият плъгин messages_es.js който е файлът, в който ще поставим съобщенията за посетителя и можем да го преведем по език.
Добавяме файловете към директорията на проекта:

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

Продължавайки с кода от предишния урок, трябва да имаме слой, където формулярите ще се показват, когато бъдат извикани с Jquery, за това под новия бутон ще създадем слоя с формуляри.

Увеличете

В заглавката на уеб страницата index.php добавяме библиотеките на jquery.validator и съобщения. След това ще ги използваме за създаване на динамични форми

Ако не искаме да изтегляме приставката, можем да я използваме от външен сървър

Сега ще създадем файловете с формата, която ще се използва за регистрация на превозно средство и която ще извикаме от новия бутон. За да направим това, трябва да гарантираме, че новият бутон има идентификатор (идентификатор), за да можем след това да разпознаем кога се случва събитие, при което например се получава щракване. Тогава кодът на бутона ще бъде следният:
Името на компонента и идентификаторът могат да бъдат еднакви, но уникални за всеки html компонент. Във файла functions.js пишем следния код, който ще открие щракването на мишката върху бутона newvehiculo и ще извика файла hivehiculos с формуляра за регистрация.

 // Извикайте формуляр за регистрация на превозно средство $ (function () {$ ("# newvehiculo"). Щракнете върху (function () {$ .get ("http: //localhost/proyectos/agenciaautos/altavehiculos.php", function (data) {$ ("# форми"). html (данни); // Взимам резултата от страницата и вмъквам данните във формите div});});});

След това създаваме регистрационния формуляр, който ще се нарича altavehiculos.php
Ние включваме необходимите библиотеки в заглавката, за да можем да работим с jquery и да проверяваме полетата

Ние създаваме някои стилове, за да придадем на формата някакъв дизайн и ред. За пример може да се използва в същия файл или в отделен файл със стилове и след това да се добави в заглавката.

След това пишем кода за запазване на данните и кода на формуляра за улавяне на данни

 $ стойност) {$ _POST [$ ключ] = mysql_real_escape_string ($ стойност); } $ sql = "INSERT INTO` превозни средства" (`превозно средство_идентификатор`,` характеристики`, `марка`,` модели`, `снимка1`) СТОЙНОСТИ ('{$ _POST [' vehicle_idtype ']}}', '{$ _POST [ 'характеристики']} ',' {$ _POST ['марка идентификатор']} ',' {$ _POST ['модел идентификатор']} ',' {$ _POST ['снимка1']} ') "; mysql_query ($ sql) или die (mysql_error ()); ехо "Регистрацията е завършена."; }?> var13 -> // Консултирам превозни средства, за да попълня избор на тип превозно средство Регистрация на превозно средство
Избор на превозно средство

Също така създавам функциите на Jquery за свързване на изявленията във формуляра за регистрация

 // изберете свързана регистрация на автомобил и марки $ (function () {$ ("# регистрация на превозно средство"). change (function () {vehicle = $ (this) .val (); // избрана стойност $ .get ("http : //localhost/proyectos/agenciaautos/marcas.php?idvehiculo="+vehiculo, function (data) {$ ("# altamarca"). html (data); // Взимам резултата от страницата и вмъквам данните в комбо});});}); // избираме свързани марки и модели $ (function () {$ ("# highbrand"). change (function () {brand = $ (this) .val (); // избрана стойност $ .get ("http: / /localhost/proyectos/agenciaautos/modelos.php?idmarca="+marca, function (data) {$ ("# altamodelo"). html (data); // Взимам резултата от страницата и вмъквам данните в избраното} );});});

След като приключим, ако изпълним и натиснем новия бутон, регистрационната форма трябва да се появи, както следва:

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

Накрая ще направим кода за валидиране на формуляра, използвайки прост скрипт jquery и правилата на приставката за валидиране. Вътре във файла functions.js създаваме скрипт и се позоваваме на идентификатора на формуляра и му присвояваме функцията за валидиране и испанския език, в противен случай той ще бъде по подразбиране английски, когато показва съобщение за грешка.

 // валидиране на формуляр $ (document) .ready (function () {$ ("# frmalta"). validate ({lang: 'es' // или каквато и езикова опция имате.});});

След това в компонента, който искаме да потвърдим, добавяме необходимия клас, тоест елементът не може да бъде празен или без данни.
Класовете за валидиране могат да бъдат намерени във файла с съобщения. Пример за валидиране
Потвърдете имейл:
Потвърдете дата:
Потвърдете число:
Така че, ако добавим необходимия клас към нашата форма, например в елемента textarea, и в случай на изявления за избор, трябва да оставим първата опция празна, тогава ако нищо не е избрано, грешката ще възникне и формата няма да бъде изпратен.
Характеристика

Пример за избраните модели:

 Избор на модел

И накрая, ако попълним формуляра и кликнете върху бутона Запазване, формулярът ще се изпрати, като направи jquery извикване към същата страница altavehiculos.php, който изпраща флага, изпратен със стойност 1 и след това активира вмъкването в таблицата MySQL.
Един детайл, който остава да се направи или с jquery, или с пренасочване по традиционния начин, е, че когато данните се запазят, списъкът в горната част се опреснява, тъй като регистрационната форма изчезва, но нямаме никакво събитие за напояване на списъка с превозни средства, следователно трябва да добавим извикването, така че списъкът да се показва в списъчния слой, който преди това използвахме в другия урок, по този начин можем да регистрираме информация, ако пренасочваме страницата или изпълняваме фонови задачи, без това потребителят да пренасочва страницата или за да се даде повече интерактивност или прозрачност на уеб приложението, той също така позволява повторно използване на изходния код, тъй като е съвместим с всеки браузър и устройство, съвместимо с javascript.Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка