Преглед садржаја
Комбинација ПХП -а и Јкуери -а једна је од најчешће коришћених техника за развој динамичких веб апликација.Библиотека ЈКуери нуди многе Јкуери додатке које програмери користе како би својим апликацијама дали пуно динамике како би побољшали искуство посетилаца како у Интернет прегледачу, тако и на мобилном уређају. Наставићемо са развојем апликације туторијала Генерисање динамичких листа помоћу Јкуери, Пхп и Мискл, додаћемо динамичке обрасце за регистрацију и измену информација, применом комбинације пхп и јкуери можемо извршити овај задатак без преусмеравања странице.
Такође ћемо додати додатак јкуери.валидатор то ће нам омогућити да потврдимо поља обрасца.
ПажњаЗа овај водич требат ће нам додатак који можемо преузети са хттп://јкуеривалидатион.орг/, када га преузмемо, распакирамо га и имат ћемо све датотеке које нас за сада занимају само двије, а то су:
јкуери.валидате.јс шта је сам додатак мессагес_ес.јс који је датотека у коју ћемо ставити поруке за посетиоце и можемо је превести по језику.
Додајемо датотеке у директоријум пројекта:
ЕНЛАРГЕ
Ако не желимо да преузмемо додатак, можемо га користити са спољног сервера
Сада ћемо креирати датотеке са обрасцем који ће се користити за регистрацију возила и које ћемо позвати са новог дугмета. Да бисмо то урадили, морамо осигурати да ново дугме има ид (идентификатор) како бисмо тада могли препознати када се догоди догађај у којем се, на пример, догоди клик. Тада ће код дугмета бити следећи:
Назив компоненте и идентификатор могу бити исти, али јединствени за сваку хтмл компоненту. У датотеку фунцтионс.јс записујемо следећи код који ће открити клик мишем на дугме неввехицуло и позвати датотеку хивехицулос са обрасцем за регистрацију.
// Позовите образац за регистрацију возила $ (фунцтион () {$ ("# неввехицуло"). Кликните (фунцтион () {$ .гет ("хттп: //лоцалхост/проиецтос/агенциааутос/алтавехицулос.пхп", фунцтион (дата) {$ ("# формс"). хтмл (дата); // Узимам резултат странице и убацујем податке у див форми});});}); Затим креирамо образац за регистрацију који ће се звати алтавехицулос.пхп
Укључујемо потребне библиотеке у заглавље да бисмо могли да радимо са јкуери -јем и проверавамо поља
Креирамо неке стилове како бисмо форми дали неки дизајн и ред. На пример, може се користити у истој датотеци или у засебној датотеци са стиловима, а затим додати у заглавље.
Затим пишемо код за чување података и код обрасца за хватање података
$ валуе) {$ _ПОСТ [$ кеи] = мискл_реал_есцапе_стринг ($ валуе); } $ скл = "ИНСЕРТ ИНТО` возила` (` возило_идтип`, `карактеристике`,` брендирана`, `моделидна`,` фотографија1`) ВРЕДНОСТИ ('{$ _ПОСТ [' вехицле_идтипе ']}}', '{$ _ПОСТ [ 'карактеристике']} ',' {$ _ПОСТ ['бранд ИД']} ',' {$ _ПОСТ ['модел ид']} ',' {$ _ПОСТ ['пхото1']} ')'; мискл_куери ($ скл) или умрети (мискл_еррор ()); ецхо "Регистрација завршена."; }?> вар13 -> // Консултујем возила да попуним избор типа возила Регистрација возила
Вехицле Селецт
Такође креирам Јкуери функције за повезивање исказа у регистрацијском обрасцу
// изаберите сродне регистрације возила и марке $ (фунцтион () {$ ("# регистрација возила"). цханге (фунцтион () {вехицле = $ (тхис) .вал (); // изабрана вредност $ .гет ("хттп : //лоцалхост/проиецтос/агенциааутос/марцас.пхп?идвехицуло="+вехицуло, фунцтион (дата) {$ ("# алтамарца"). хтмл (дата); // Узимам резултат странице и убацујем податке у комбиновано});});}); // изабрати повезане марке и моделе $ (фунцтион () {$ ("# хигхбранд"). цханге (фунцтион () {бранд = $ (тхис) .вал (); // Изабрана вредност $ .гет ("хттп: / /лоцалхост/проиецтос/агенциааутос/моделос.пхп?идмарца="+марца, фунцтион (дата) {$ ("# алтамодело"). хтмл (дата); // Узимам резултат странице и убацујем податке у селецт} );});}); Када завршимо, ако извршимо и притиснемо ново дугме, образац за регистрацију би требало да се појави на следећи начин:
// валидација обрасца $ (доцумент) .реади (фунцтион () {$ ("# фрмалта"). валидате ({ланг: 'ес' // или било која језичка опција коју имате.});}); Затим у компоненту коју желимо да потврдимо додамо потребну класу, односно елемент не може бити празан или без података.
Класе валидације могу се пронаћи у датотеци порука. Пример валидације
Потврдите е -пошту:
Потврдите датум:
Потврдите број:
Дакле, ако елементу тектареа, на пример, у форму додамо потребну класу, а у случају изабраних наредби, прву опцију морамо да оставимо празну, а ако ништа није изабрано, грешка ће се појавити и облик неће бити послао.
Карактеристике
Модел Селецт
Коначно, ако довршимо образац и кликнемо на дугме Сачувај, образац ће се послати позивом јкуери на исту страницу алтавехицулос.пхп, која шаље заставицу послату са вредношћу 1, а затим активира уметање у МиСКЛ табелу.
Један детаљ који остаје да се уради било помоћу јкуери -ја или преусмеравања на традиционалан начин, је тај да када се подаци сачувају, листа на врху се освежава пошто нестаје образац за регистрацију, али немамо ниједан догађај за наводњавање листе возила, стога морамо додати позив тако да се листа прикаже унутар слоја листе који смо претходно користили у другом водичу, на овај начин можемо регистровати информације ако преусмеравамо страницу или обављамо позадинске задатке без да корисник мора да преусмери страницу или да би веб апликацији дала више интерактивности или транспарентности, такође омогућава поновну употребу изворног кода јер је компатибилна са било којим прегледачем и уређајем компатибилним са јавасцрипт -ом.Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
