Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Адправіць форму без абнаўлення старонкі з дапамогай JQuery

by
Difficulty:IntermediateLength:LongLanguages:

Belarusian (беларуская мова) translation by Tatsiana Bochkareva (you can also view the original English article)

Раней на Nettuts +, Фило паказаў, як вы можаце выкарыстоўваць JQuery, каб дадаць форму каментау праверкі на WordPress , які працуе без перазагрузкі старонкі. Яшчэ адзін выдатны спосаб utlizing JQuery для паляпшэння карыстацкага досведу, каб не толькі пацвердзіць, але прадставіць сваю форму цалкам без абнаўлення старонкі.

У гэтым уроку я пакажу вам, як лёгка гэта зрабіць проста - прадставіць кантактную форму, якая пасылае па электроннай пошце, без абнаўлення старонкі з дапамогай JQuery! (Фактычны адрас электроннай пошты адпраўляецца з PHP скрыпт, які апрацоўвае ў фонавым рэжыме). Давайце пачнем.


Што мы будуем

У гэтым прыкладзе мы маем простую форму кантакту з імем, адрасам электроннай пошты і нумарам тэлефона. Форма ўяўляе ўсе палі ў PHP-скрыпт без абнаўлення старонкі, выкарыстоўваючы ўласныя функцыі JQuery (роднай сэнс, вам не трэба запампоўваць ніякіх дадатковых убудоў, каб зрабіць яго працу.

Калі вы знайшлі гэтую артыкул без папярэдняга знаёмства з JQuery, выдатнае месца для пачатку працы будзе артыкул Джэфры Шляхі на 15 рэсурсаў, каб вы пачалі з JQuery з нуля.


Крок 1 - Пабудова формы HTML

Давайце паглядзім на наш HTML-разметкі. Мы пачынаем з нашай асноўнай формай HTML:

Вы можаце заўважыць, што я уключыў DIV з ідэнтыфікатарам CONTACT_FORM, які абгортваецца вакол усёй формы.
Пераканайцеся, што не прапусціце, што DIV ў сваёй уласнай форме, як мы будзем мець патрэбу ў гэтай абгортцы DIV пазней. Вы
можаце таксама заўважыць, што я пакінуў як дзеянне і дэталь метады формы тэга нарыхтоўкі. Мы
на самай справе не патрэбныя ні з іх тут, таму што JQuery бярэ на сябе ўсё гэта пазней.

Яшчэ адна важная рэч, каб быць упэўненым, каб уключыць гэтае значэнне ідэнтыфікатара для кожнага поля ўводу. Значэння ідэнтыфікатараў
гэта тое, што ваш скрыпт JQuery будзе шукаць для апрацоўкі формы.

Я дадаў некаторыя стылі CSS і фонавы малюнак у Photoshop для атрымання наступнай формы:


Крок 2 - Пачынаем дадаваць JQuery

Наступны крок у гэтым працэсе з'яўляецца даданне некаторага кода JQuery. Я збіраюся выказаць здагадку, што вы загрузілі JQuery, загрузілі яго на свой сервер і спасылаецеся на яго на сваёй вэб-старонцы.

Затым адкрыйце яшчэ адзін новы файл JavaScript, пакажыце яго ў сваім HTML, як і любы звычайны файл JavaScript,
і дадайце наступнае:

Першая функцыя () займаецца тым, што загружае падзеі ўнутры, як толькі HTML дакумент будзе гатовы. Калі вы раней ужо працавалі JQuery, гэтая функцыя такая ж, як функцыя document.ready JQuery. Такім чынам, мы пачынаем з гэтага, і ўнутры ў нас ёсць функцыя клік, якая выконваецца пры націску кнопкі адпраўкі з імем класа «кнопка». У канчатковым выніку тое, што мы дасягнулі з гэтымі радкамі кода, такое ж, як калі б мы дадавалі падзея OnClick да кнопкі адправіць у HTML. Прычына, па ЯКОЙ мы робім гэта з JQuery, - гэта чыстае падзел нашага адлюстравання ад нашых скрыптоў.


Крок 3 - Даданне некаторых валідных форм

Ўнутры нашай функцыі, якая загружаецца, калі старонка гатовая, мы дадаем некаторую праверку формы. Але першае, што вы ўбачыце, гэта даданне $('.error').hide();. Гэтая радок хавае нашы 3 пазнакі з імем класа «error». Мы хочам, каб гэтыя цэтлікі былі схаваныя не толькі тады, калізагружаецца старонка, але таксама калі
вы націскаеце «Адправіць», у выпадку, калі адно з паведамленняў было раней паказана карыстальніку. Кожнае паведамленне пра памылку павінна з'яўляцца толькі ў тым выпадку, калі праверка не выконваецца.

Мы правяраем, спачатку засталося Ці поле імя пустым, і калі так, тады мы пакажам пазнаку з ідэнтыфікатарам NAME_ERROR. Затым мы засяродзім увагу на поле ўводу імя, калі карыстальнік
зусім не разумее, што рабіць далей! (Я навучыўся ніколі не прымаць занадта шмат ад карыстальнікаў).

Каб больш падрабязна растлумачыць, як гэта адбываецца, мы ўсталёўваем зменную «імя» у значэнне поля ўводу з ідэнтыфікатарам «Імя» - усё адным радком JQuery:

Затым мы правяраем, пустое Ці гэта значэнне, і калі гэта так, мы выкарыстоўваем метад JQuery шоў (), каб паказаць пазнаку з
id "name_error":

Затым мы змяшчаю фокус формы назад у поле ўводу з ідэнтыфікатарам «Імя» і, нарэшце, вяртае мана:

АБАВЯЗКОВА хлусня вярніце ў сваім кодзе, інакш уся фармуляр будзе дасланы (што не з'яўляецца
мэтай гэтага ўроку)! Калі вяртаецца хлусня, гэта не дазваляе карыстальніку працягваць
без запаўнення неабходнага поля (ёй).


Крок 4 - Апрацоўка нашага прадстаўлення формы з дапамогай функцыі JQuery AJAX

Цяпер мы дабіраемся да сутнасці падручніка - адпраўляем нашу форму без абнаўлення старонкі, якая адпраўляе значэння формы ў PHP сцэнар у фонавым рэжыме. Давайце спачатку зірнем на ўвесь код, а затым я распавяду падрабязней. Дадайце наступны код крыху ніжэй фрагмент праверка, які мы дадалі раней (і да таго, як функцыя націсніце кнопкі будуць зачыненыя):

У нас тут шмат усяго! Давайце разбярэм ўсё гэта па невялікіх частках -усе гэта так проста і так лёгка выкарыстоўваць, як толькі вы разумееце гэты працэс. Спачатку мы ствараем радок значэнняў, якія з'яўляюцца усімі значэннямі формы, якія мы хочам перадаць сцэнары, які адпраўляе электронны ліст.

Успомнім раней, мы ўсталявалі зменную 'імя' са значэннем поля ўводу з ID "імя", напрыклад:

Мы можам зноў выкарыстоўваць гэта значэнне «імя», а таксама значэнне «электронная пошта" і "тэлефон" для стварэння нашай dataString:

Я пракаментаваў папярэджанне, якое часам выкарыстоўваю, каб быць упэўненым, што я выкарыстоўваю правільныя значэння, якія могуць апынуцца карыснымі ў гэтым працэсе. Калі вы раскомментируешь гэтае папярэджаньне і пратэстуе свая форму, мяркуючы, што ўсе дайшло да гэтага часу, вы павінны атрымаць паведамленне, падобнае наступнага:

Цяпер мы дабіраемся да нашай галоўнай функцыі ajax, зоркі сённяшняга шоу. Вось дзе ўсё адбываецца, так што
звярніце сюды сваю пільную ўвагу!

У асноўным, што адбываецца ў кодзе, гэта: .ajax() функцыя апрацоўвае значэння з нашай радкі з імем dataString (dada:dataString) з дапамогай PHP-скрыпту пад назвай process.php (url:"bin/process.php"), выкарыстоўваючы метад POST (type:"POST»). Калі наш скрыпт паспяхова апрацаваны, мы можам адлюстраваць паведамленне карыстачу і, нарэшце, вярнуць хлусня, каб старонка не перазагружаецца. Вось яно! Увесь працэс апрацоўваецца прама ў гэтых некалькіх радках!

Ёсць больш складаныя рэчы, якія вы можаце зрабіць тут, акрамя адпраўкі электроннай пошты і паведамленні аб паспяховым завяршэнні. Напрыклад, вы можаце адправіць свае значэння ў базу дадзеных, апрацаваць іх, а затым адлюстраваць вынікі назад карыстальніку. Таму, калі вы размясцілі апытанне сярод карыстальнікаў, вы можаце апрацаваць іх голас, а затым вярнуць вынікі галасавання, без неабходнасці абнаўлення старонкі.

Падвядзем вынік таму, што адбылося ў нашым прыкладзе, каб пераканацца, што мы ўсе зразумелі. Мы ўзялі нашы значэння формы з дапамогай JQuery, а затым змясціў іх у радку наступным чынам:

Затым мы выкарыстоўвалі JQuery Ajax функцыі для апрацоўкі значэнняў у dataString. Пасля гэтага
працэс завяршаецца паспяхова, мы выводзім паведамленне назад карыстачу і дадаем вярнуць хлусня, каб наша старонка не абнаўлялася:

Паспяховая частка скрыпт быў запоўненая некаторыя канкрэтны кантэнт, які можа быць адлюстравана назад карыстальнік. Але што тычыцца нашай функцыянальнасці Ajax, гэта ўсё, што трэба. Для атрымання дадатковых параметраў і настроек абавязкова азнаёмцеся з дакументацыяй па функцыі JQuery Ajax. Прыкладам тут з'яўляецца адна з больш простых рэалізацый, але нават у гэтым выпадку яна вельмі эфектыўная, як вы можаце бачыць.


Крок 5 - Адлюстраванне паведамленне назад карыстальнік

Давайце сцісла разгледзім тую частку кода, якая адлюстроўвае наша паведамленне назад карыстачу, каб скончыць гэты падручнік.

Па-першае, мы мяняем усё змесціва div_control_form (памятаеце, я сказаў, што нам спатрэбіцца гэты спраў) са наступным радком:

У гэтым радку замяняецца усё змесціва ўнутры div_control_form, выкарыстоўваючы функцыю JQuery html(). Таму замест формы ў нас зараз ёсць толькі новы DIV ўнутры, з ID «паведамленне». Затым мы запаўняем гэты дзіў фактычным паведамленнем - h2, у якім гаворыцца: "Contact Form Submitted":

Затым дадасць яшчэ больш кантэнту ў div паведамленнях з дапамогай JQuery append(), і, перш за ўсё, мы дадамо класны эфект, схаваўшы дзіў з дапамогай JQuery hide(), а затым схавае ўсё гэта з дапамогай функцыі fadeIn():

Такім чынам, карыстальнік атрымлівае наступныя дадзеныя пасля адпраўкі формы:

Да цяперашняга моманту, я думаю, вам прыйдзецца пагадзіцца з тым, што неверагодна лёгка адпраўляць формы без абнаўлення старонкі, выкарыстоўваючы магутную Jquery функцыю Ajax. Проста атрымаеце значэнне ў вашым файле JavaScript, апрацуйце іх з дапамогай функцыі Ajax і вярніце хлусня, і рухайцеся далей. Вы можаце апрацоўваць значэння ў вашым PHP-скрыпце гэтак жа, як і ў любым іншым PHP-файле, з той толькі розніцай, што карыстальніку не трэба чакаць абнаўлення старонкі - усё гэта адбываецца ціха ў фонавым рэжыме.

Таму, калі ў вас ёсць кантактная форма на вашым вэб-сайце, форма ўваходу ў сістэму або нават больш прасунутыя формы, якія апрацоўваюць значэння праз базу дадзеных і вяртаюць вынікі, вы можаце зрабіць усё гэта лёгка і эфектыўна, і, магчыма, самае галоўнае, вы падвышаеце якасць працы з вашым сайтам, падаючы інтэрактыўнасць без неабходнасці чакаць перазагрузкі старонкі.

Заключэнне

Я хацеў бы дадаць некаторыя заключныя словы пра наш дэманстрацыйным прыкладзе. У дэманстрацыі вы можаце заўважыць, што на самой справе выкарыстоўваецца адзін убудова - файл runonload.js. У пачатку падручніка я паказваў, што мы не будзем выкарыстоўваць якія-небудзь убудовы, а затым вы выявіце ў дэма-версіі дадатковы скрыпт runonload, таму можа спатрэбіцца невялікае тлумачэнне! Для ўсіх, хто зацікаўлены ў тым, каб убачыць жывую рабочую дэмаверсій, вы можаце праглядзець маю кансультацыйную па SEO.

Адзінае, што я зрабіў з runonload, на самай справе не мае ніякага дачынення да апрацоўкі формы. Такім чынам, вы можаце цалкам выканаць функцыю Ajax без якіх-небудзь дадатковых убудоў. Я выкарыстаў runonload, каб сфакусаваць поле ўводу імя пры загрузцы старонкі. Мой вопыт заключаўся ў тым, што выклік runonload часам можа быць лепшай заменай для ўласнай функцыі гатоўнасці дакумента JQuery, і я выявіў, што гэта сапраўды так. Па нейкай прычыне функцыя факусоўкі () не будзе працаваць пры загрузцы старонкі з выкарыстаннем функцыі гатовага дакумента JQuery, але яна працуе з runonload, і менавіта таму вы лічыце яе часткай гэтага прыкладу. Таму, калі вы ведаеце спосаб зрабіць гэта без выкарыстання runonload, я быў бы рады пачуць ад вас пра гэта.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.