Како се користи АЈАКС за слање веб форме

Реклама

Можда сте прочитали наше Водич за јКуери Основни водич за ЈКуери за програмере ЈавасцриптАко сте Јавасцрипт програмер, овај водич за ЈКуери ће вам помоћи да започнете кодирање попут нинџе. Опширније , као и део пет нашег јКуери туториал на АЈАКС-у јКуери Туториал (5. део): АЈАКС Тхем Алл!Како се ближи крај наше мини туториал серије о јКуери-у, време је да детаљније погледамо једну од најчешће коришћених функција јКуери-а. АЈАКС омогућава веб локацији да комуницира са ... Опширније , али данас ћу вам показати како помоћу АЈАКС-а за динамичко слање веб форме. ЈКуери је далеко најлакши начин за коришћење АЈАКС-а, па погледајте наш уводни водич јКуери Туториал - Први кораци: Основе и изборнициПрошле недеље сам говорио о томе колико је јКуери важан сваком модерном веб програмеру и зашто је то феноменално. Ове недеље мислим да је време да се умажемо руке неким кодом и научимо како ... Опширније ако сте почетник Ускочимо одмах унутра

Зашто користити АЈАКС

Можда се питате „Зашто ми треба АЈАКС?“ ХТМЛ је савршено способан за слање образаца и то чини на прилично безболан начин. АЈАКС се имплементира у великој већини веб страница, а његова популарност и даље расте.

Огромна корист коју АЈАКС доноси је способност да делимично оптерећење делови веб страница. То омогућава да странице изгледају брже и брже одзивним, а штеди пропусност само што је потребно да поново учита мали део података уместо целе странице. Ево неких основних случајева употребе АЈАКС:

• Редовно проверавајте нове мејлове.
• Ажурирајте резултат уживо на сваких 30 секунди.
• Ажурирајте цену за онлајн аукцију.

АЈАКС вам, програмеру, пружа готово неограничену могућност да веб странице учините брзим, бржим и бржим - нешто на чему ће вам се посетиоци захвалити.

ХТМЛ

Пре него што започнете, потребан вам је ХТМЛ образац. Ако не знате шта је ХТМЛ, прочитајте наш водич о како направити веб страницу за почетнике Како направити веб страницу: за почетникеДанас ћу вас водити кроз поступак израде комплетног веб локације од почетка. Не брините ако ово звучи тешко. Водићу вас кроз то на сваком кораку. Опширније .

Ево ХТМЛ-а који вам је потребан:

 Име: Старост: 

Овај хтмл дефинише образац са неколико елемената. Запазите како има поступак и метод атрибути. Они дефинишу где и како се образац доставља. Они нису потребни када користите АЈАКС, али је добра идеја да их употребите, јер обезбеђује да посетиоци ваше веб локације и даље могу да је користе ако је ЈаваСцрипт онемогућен. Ова страница укључује јКуери на којем је домаћин Гоогле ЦДН Шта су ЦДН-ови и зашто складиштење више није проблемЦДН-ови чине Интернет брзим и веб локација приступачним чак и када их примените на милионе корисника. Прво, пропусност кошта новац; они од нас на ограниченим уговорима то и знају. Не само да ... Опширније . Тхе глава садржи а скрипта таг - овде ћете написати свој код.

Овај образац можда изгледа мало досадно, па ћете можда желети да размотрите учење ЦСС-а 5 беби корака за учење ЦСС-а и постати Кицк-Асс ЦСС чаробњакЦСС је једина најважнија измена веб страница у последњој деценији и отворио је пут раздвајању стила и садржаја. На модерни начин КСХТМЛ дефинише семантичку структуру ... Опширније да га оживе.

ЈаваСцрипт

Постоји неколико начина за слање образаца са ЈаваСцрипт-ом. Први и најлакши начин за то је путем прихвати метода:

доцумент.гетЕлементБиИд ('мојФорм'). субмит ();

Наравно, можете циљати форму помоћу јКуери-а ако желите - нема разлике:

$ ('# миФорм'). субмит ();

Ова команда говори вашем прегледачу да пошаље образац, баш као и да притиснете дугме за слање. Циља форму на основу свог ид-а, а у овом случају то је то миФорм. Ово није АЈАКС, па ће поново учитати целу страницу - нешто што није увек пожељно.

У метод атрибута вашег обрасца, одредили сте како да предате образац. Ово може бити ПОШТА или ДОБИТИ. Овај атрибут се не користи приликом слања образаца помоћу АЈАКС-а, али се може користити исти метод.

Већина модерног веба покреће ГЕТ или ПОСТ захтеве. Генерално гледано, ГЕТ се користи за дохваћање података, док се ПОСТ користи за слање података (и враћање одговора). Подаци се могу слати са ГЕТ, али ПОСТ је готово увек бољи избор - посебно за податке обрасца. Можда сте већ видели ГЕТ захтеве - шаљу податке у прилогу УРЛ-у:

сомевебсите.цом/индек.хтмл? име = Јое

Упитни знак говори претраживачу да се сви подаци одмах након њега не употребљавају за прелазак на веб локацију, већ их треба пренијети на страницу да би се они могли обрадити. Ово добро функционише за једноставне ствари попут броја странице, али има и неке недостатке:

Максимално ограничење карактера: Постоји највећи број знакова који се могу послати у УРЛ-у. Можда вам није довољно ако покушавате да пошаљете велику количину података.
Видљивост: Свако може видети податке који се шаљу у ГЕТ захтеву - није добро за осетљиве податке, попут лозинки или података обрасца.

ПОСТ захтеви функционишу на сличан начин, само што они не шаљу податке у УРЛ-у. То значи да се може послати већа количина података (подаци су познати као корисни терет), а одређену сигурност добијају излагањем података. Ипак, подацима се и даље лако може приступити, па погледајте у ССЛ сертификат Шта је ССЛ сертификат и да ли вам треба?Прегледавање Интернета може бити застрашујуће када су у питању лични подаци. Опширније ако желите потпуни душевни мир.

Било да се користи ПОСТ или ГЕТ, подаци се шаљу кључ -> вредност парова. У горњој УРЛ адреси је кључ име, а вредност је Јое.

Бољи начин за слање образаца је употреба Асинхрони ЈаваСцрипт и КСМЛ (АЈАКС). ЈаваСцрипт подржава АЈАКС позиве, али могу бити збуњујуће за употребу. ЈКуери примењује потпуно исте методе, али то чини на једноставан начин употребе. Можете да упутите прегледач да изврши ГЕТ или ПОСТ захтев - држите се ПОСТ-а за овај пример, али ГЕТ захтеви се изводе на сличан начин.

Ево синтакса:

$ .пост ('неки / урл', $ ('# мојФорм'). сериализе ());

Овај код чини неколико ствари. Први део ($) даје вашем прегледачу да желите да користите јКуери за овај задатак. Други део позива на пошта метода из јКуери. Морате да прођете у два параметра; Прво је УРЛ за слање података, док је други податак. Можда ћете установити (у зависности од УРЛ адресе којој покушавате да приступите) да су прегледачи „ истог порекла политика безбедности овде може да се меша. Можете да омогућите цросс-оригин дељење ресурса да бисте то заобишли, али довољно је једноставно да укажете на УРЛ који се налази на истом домену као и ваша страница.

Други параметар позива јКуери сериализе метода на обрасцу. Овом методом приступају се свим подацима из вашег обрасца и припремају их за пренос - сериализују их.

Овај код је довољан да бисте послали образац, али може се догодити да ствари делују помало чудно. Вредно је истражити алатке за развојне програмере вашег прегледача, јер оне захтевају грешку приликом уклањања грешака.

Алтернативно, Поштар је одличан бесплатан алат за тестирање ХТТП захтева.

Ако желите да пошаљете образац помоћу АЈАКС када се притисне дугме за слање, то је једнако лако. Морате да приложите свој код на прихвати догађај форме. Ево код:

$ (доцумент) .он ('субмит', '# миФорм', фунцтион () {$ .пост ('соме / урл', $ ('# миФорм'). сериализе ()); ретурн фалсе; });

Овај код чини неколико ствари. Када се преда ваш образац, долази ваш прегледач и прво покреће ваш код. Ваш код тада шаље податке обрасца помоћу АЈАКС-а. Завршни корак који је потребан је спречавање слања оригиналног обрасца - то сте већ учинили са АЈАКС-ом, па не желите да се то поново понови!

Ако желите да обавите неки други задатак након што АЈАКС заврши (или можда чак врати поруку о статусу), морате да користите позове. ЈКуери ово чини врло једноставним за употребу - једноставно пренесите функцију као још један параметар попут овог:

$ .пост ('урл', $ ('# миФорм'). сериализе (), функција (резултат) {цонсоле.лог (резултат); }

Тхе резултат аргумент садржи све податке враћене помоћу УРЛ-а којем су подаци послани. На ове податке лако можете да одговорите:

иф (резултат == 'успех') {// урадите неки задатак. } елсе {// урадите неки други задатак. }

То је то за овај пост. Надамо се да сада добро разумете ХТТП захтеве и како АЈАКС функционише у контексту форме.

Да ли сте данас научили неке нове трикове? Како користите АЈАКС са обрасцима? Јавите нам своје мисли у коментарима испод!

Имаге Кредити: вецторфусионарт / Схуттерстоцк