В този урок ще ви се покаже как да се направи форма за контакт, чрез който ще бъде изпратен по електронната поща без опресняване на страницата на използване на JQuery. Нека да започнем.
Не забравяйте да ви посъветва да изтеглите изходния код за целия урок. Ще има Скриптът, който реализира процеса на доставяне на съобщения.
С една дума, един много полезен урок!
Стъпка 1 - създаване на HTML форма директно към самия
Нека да погледнем в нашия HTML код. Започваме с нашата основна форма HTML:
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
Може би сте забелязали, че съм включил Разделение идентификатор форма contact_, която обхваща всички формата на код. Вероятно ще забележите, че съм напуснал действието параметри и начина празна. Направих го нарочно, защото повече за това по-късно се грижи за JQuery.
Друго важно нещо. Не забравяйте да се включат стойността на номер във всяка поле за въвеждане (линията започва с въвеждане на етикет). Това идентификатор стойност JQuery скрипт ще търси обработка форма.
Добавих някои CSS стилове и фоново изображение в Photoshop, за да получите форма:
Стъпка 2 - започнете да добавяте JQuery
Следващата стъпка е да започнете да добавяте в части JQuery код. Ще приемем, че Б вече е изтеглен на JQuery.
Първата функция (функция ()) тя започва да изтеглите събития, веднага след като документът за HTML е готова. Ако сте направили някаква работа с JQuery, функцията е същата като document.ready функция. Кодът може да се разбере, че ние имаме един бутон функция кликване, с името на класа «бутон на задачите». По този начин ние тук са достигнали същия ефект, както ако бяхме в областта на нашата форма на добавена функция вход OnClick бутона "Изпращане".
Стъпка 3 - писмено потвърждение вход форма
Вътре ни задължения, които се зарежда, когато страницата е готово, ние добавяме някои валидиране на въведените данни. И първото нещо, което виждате, това е, че добавя $ ( ". Грешка"). Hide (). Това е необходимо, за да покрие нашия 3 етикет етикет с «грешка» клас. В крайна сметка, ние искаме те да бъдат скрити, а не само при първото зареждане на страницата, но при натискане на "изпрати", в случаите, когато едно от посланията, които са били показани на потребителя преди. Всяко съобщение за грешка трябва да се показва само когато влезе грешни данни.
Проверете първото поле: ако полето за име е оставено празно от страна на потребителя, ние показваме съобщение, записано в етикета на етикет с идентификатор name_error. След това, ние поставяме фокуса върху името на полето за въвеждане, в случай, че потребителят се бърка с какво да се прави по-нататък. (Мисля, че не си струва много напрежение, когато става дума за потребителски формуляр)
Обяснявам как работи това нещо. променлива "името" The пишем стойността, която е въведена в областта с "името" на идентификатор - това е само една линия на jQuary.
След това проверява дали полето е празна, и ако е така, ние използваме шоу JQuery е () метод, за да покажете етикет с идентификатор «name_error».
След това се върнете в центъра на терена с "името" на идентификатор, и да се върне фалшива от функции.
Уверете се, че имате в края на връщане фалшиви, в противен случай стойността на всички полета ще бъдат изпратени (това напълно нарушава идеята на този урок) код. върнете фалшиво, не позволява на потребителя да изпраща данните от формуляра, докато всички полета са попълнени.
Стъпка 4 - процесът на изпращане на данни форма чрез използването на Ajax функции JQuery е
Сега иди, така да се каже, в сърцето на нашия учебен материал - създаване без опресняване на менюто на страницата, която изпраща стойностите на форма с помощта на PHP скриптове във фонов режим. Нека да разгледаме първо изобщо кода като цяло, и тогава ще говорим за отделно отнето. Добавете кода в същите tutorial.js документи, точно под кода написано по-горе параграф.
Имаме много неща се случват тук! Нека да разделим целия код от страна. В част е по-лесно да се разбере. На първо място, ние създаваме стойност низ. Той съдържа стойностите на всички сфери на нашия формуляр, които искаме да премине към скрипта, който изпраща съобщение.
По-рано, ние сме обявени за променливата "име" и да го настроите като стойността, която е вписана в "име" идентификатор на полето.
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
Можем да използваме стойността на "фамилия", отново, както и стойността на "имейл" и "телефон", за да създадете низ dataString стойности:
Сега, на нашата основната функция - Аякс. Всичко се развива действието, така че се отделя специално внимание.
Основно това, което се случва във вашата код е. Аякс () функция обработва ценностите на нашата dataString линия (данни: dataString), с обаждане на PHP скрипт, наречен process.php (URL: »бин / process.php»), като се използва методът на POST (тип: »POST»). Ако скриптът изпълни успешно, ние ще бъдем в състояние да показва съобщение на потребителя за успеха, и най-накрая, върнете падания, ако страницата не се актуализира. Това е всичко. Целият процес се извършва само за няколко линии!
Там са по-напреднали неща които можете да направите тук, вместо да изпращате и получавате имейл съобщения за хода на действието. Например, можете да изпращате вашите ценности към базата данни, да ги обработват, след което да покаже резултатите обратно към потребителя. Така че, ако има право на глас на сайта, можете да ги обработва и показва резултатите от гласуването на този потребител, без опресняване на цялата страница.
Нека да обобщим, че се е случило в нашия пример, за да се увери, че всички ние сме прегърнали. Взехме нашия смисъл на JQuery и след това те се добавят към низа, като този:
След това ние използвахме функция JQuery - Аякс за преработка ценности dataString линия. След това процесът завършва успешно, а ние ще се появи съобщение за потребителя и да се върнете невярно, ако няма актуализация на тази страница:
Стъпка 5 - прилагат шоуто на потребител при въвеждането на данни във форма,
Нека накратко да разгледаме част от код, който реализира дисплея на съобщение на потребителя.
На първо място, ние ще се промени цялото съдържание на CONTACT_FORM Div (не забравяйте, аз казах, че ще се нуждаят от този Разделение) със следния ред:
Какво е направено? Заменихме всички DIV с идентификатор = "CONTACT_FORM", като се използва JQuery HTML (функция). Така че, вместо имаме нова форма Разделение в ИД = "съобщение". След това, поставете в съобщението за Разделение - ще бъде h2 тагове с подписването на "Форма за контакт Изпратен"
Сега ще добавим още повече съдържание в нашия Разделение използване функция JQuery за добавяне (), тогава ние ще скрие всички Разделение с нашето послание с помощта на функция JQuery скрий (), и се прилагат готини ефекти към появата fadeIn () fuektsiii.
В крайна сметка, това е, което потребителят вижда, след правилния запис на данни под формата на:
В този урок, посветен на подаване на формуляр, без да презаредите страницата, AJAX инструменти и JQuery, завършена. Всичко най-хубаво!
Преведено и редактирана от: Виктор Хорн и Андрю Bernatsky. webformyself екип.
Актуални тенденции и подходи за уеб програмиране
Научете алгоритъм бързо професионално израстване с нула в строителна площадка
Най-IT новини и уеб разработки на нашия канал Телеграма
Сега погледнете на курс за организацията на работата с динамични форми!
Свързани статии