Започели смо водич да бисмо добили креирање и подношење образаца путем Ајака, ово је врло лако када стварамо странице у ХТМЛ -у праве обрасце унос података, било да нам служи Контакт формулар са самом страницом или организацијом, за спровођење анкете, попут регистрације итд. Нормално је да ако желимо да овај образац направимо за нешто једноставно, користимо ПХП Пост метод за слање информација и могућност прегледа, обраде или измене.
Међутим, употреба ове методе у ПХП -у има велики недостатак, што приликом уноса података имамо потребу да ажурирамо или поново учитамо дотичну страницу. Зато ћемо видети метод у коме за њим нема потребе.
Мислим на образац креиран помоћу Ајака, такође помогао у ПХП -у и креиран за страницу у ХТМЛ -у. Очигледно морамо да направимо нашу страницу у ХТМЛ -у, наш индекс, који можемо прилагодити или персонализовати стиловима захваљујући ЦСС датотеци.
Након стварања те базе, мораћемо да направимо још 2 датотеке, пхп датотеку у којој ћемо уредити унос података помоћу обрасца и скрипту имплементирану у јавасцрипт, то јест .јс датотеку. У овој скрипти ћемо користити Ајак за обраду података на такав начин да не морамо поново учитавати нашу веб страницу као што би се догодило ако бисмо користили само пхп методу као што је Пост или гет.
поред овога мораћемо да укључимо библиотеку јКуери да бисмо могли да тумачимо оно што пишемо са Ајаком.
За почетак, важно је запамтити да ће све датотеке које креирамо, наша Ајак јавасцрипт датотека коју ћемо назвати оператион.јс, цсс датотека са стиловима коју ћемо назвати стилес.цсс, ако ћемо је креирати, и библиотеку јКуери морамо је укључити на почетак нашег ХТМЛ кода.
Једноставно је као укључи их у главу из нашег индек.хтмл:
…Сада ћемо креирати датотеку са једноставним пхп кодом коју ћемо назвати енвио.пхп где ћемо прикупљати информације које се шаљу преко наше веб странице. У овом случају, информације ће бити за образац за контакт, па ће се подаци слати на нашу е -адресу како бисмо могли читати поруке које су оставили корисници, иако се то може измијенити и послати на другу страницу или друго мјесто.
Након креирања пхп кода, идемо на заиста занимљиву ствар, а то је стварање наше датотеке оператион.јс у којој ћемо користити Ајак. На овај начин ћемо обрадити податке за наш образац за контакт без ажурирања странице као што је претходно наведено. Прво ћемо показати код који морамо написати у скрипту:
функција сендМаил () {$ ("# цар_сенд"). аттр ("онемогућено", тачно); $ (". цар_еррор"). ремове (); вар филтер = / [А-За-з] [А-За-з0-9 _] * @ [А-За-з0-9 _] +. [А-За-з0-9 _.] + [А -за- з] $ /; вар с_емаил = $ ('# ц_маил'). вал (); вар с_наме = $ ('# ц_наме'). вал (); вар с_мсј = $ ('# ц_мсг'). вал (); иф (филтер.тест (с_емаил)) {сендМаил = "труе"; } елсе {$ (‘# ц_маил’). афтер ("Унесите важећу адресу е -поште."); сендМаил = "фалсе"; } иф (с_наме.ленгтх == 0) {$ (‘# ц_наме’). афтер ("Молимо унесите своје име."); вар сендМаил = "фалсе"; } иф (с_мсј.ленгтх == 0) {$ (‘# ц_мсг’). афтер ("Унесите поруку."); вар сендМаил = "фалсе"; } иф (сендМаил == "труе") {вар дата = {"наме": $ ('# ц_наме'). вал (), "емаил": $ ('# ц_маил'). вал (), "мессаге" : $ ('# ц_мсг'). вал ()}; $ .ајак ({дата: дата, урл: 'сенд.пхп', типе: 'пост', бефореСенд: фунцтион () {$ ("# цар_сенд"). вал ("Сендинг …");}, успех : фунцтион (респонсе) {$ ('форм') [0] .ресет (); $ ("# цар_енвиар"). вал ("Субмит"); $ ("# ц_информатион п"). хтмл (респонсе); $ ("#ц_информатион"). фадеИн ('слов'); $ (" # цар_енвиар"). ремовеАттр ("дисаблед");}}); } елсе {$ ("# цар_субмит"). ремовеАттр ("дисаблед"); }} Креирамо променљиву филтера како бисмо проверили да ли је порука е -поште коју уносимо важећа. За ово стављамо да је унета адреса неки низ знакова иза кога следи симбол ат, други низ знакова, тачка и више знакова. Ако нема такву структуру када шаљемо поруку, рећи ће нам да се не може послати јер унета е -пошта није важећа. Ако испуњава услове, сачувајте вредност труе у променљивој за слање е -поште сендМаил и наставите проверу.
Затим потврдите дужину имена. Ако је једнако 0, значи да нисмо унели име и тражи од нас да га поново унесемо.
Исто ради са поруком и њеном дужином како би проверио да поље нисмо оставили празно.
Након што сте проверили сва поља и видели да су тачна, сачувајте у променљивој података која је низ, име, е -поруку и поруку коју треба послати.
Коначно, са Ајак -ом прослеђујемо податке и радимо упућивање на датотеку енвио.пхп користећи метод пост и шаљемо информације. Пре него што се пошаље, појавиће се порука "слање" док се процес успешно не заврши.
Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен
