Как да използвате AJAX за изпращане на уеб формуляр

реклама

Може да сте чели нашите Справочник за jQuery Основно ръководство за JQuery за програмисти с JavaScriptАко сте Javascript програмист, това ръководство за JQuery ще ви помогне да започнете да кодирате като нинджа. Прочетете още , както и част пета от нашите jQuery урок на AJAX Урок за jQuery (част 5): AJAX Them All!Когато наближаваме края на нашата миниурок поредица jQuery, е време да разгледаме по-задълбочено една от най-използваните функции на jQuery. AJAX позволява на уебсайт да комуникира с ... Прочетете още , но днес ще ви покажа как да използвате AJAX за динамично изпращане на уеб формуляр. JQuery е най-лесният начин да използвате AJAX, така че проверете нашия начален урок Урок за jQuery - Първи стъпки: Основи и селекториМиналата седмица говорих за това колко е важно jQuery за всеки модерен уеб разработчик и защо е страхотно. Тази седмица мисля, че е време да си изцапаме ръцете с някакъв код и да научим как ... Прочетете още ако сте начинаещ Нека скочим право

Защо да използвате AJAX

Може би се питате „Защо имам нужда от AJAX?“ HTML е напълно способен да изпраща формуляри и го прави по доста безболезнен начин. AJAX е внедрен в голяма част от уеб страниците и популярността му продължава да нараства.

Огромната полза, която AJAX носи, е способността да частично натоварване части от уеб страници. Това прави страниците да изглеждат по-бързи и по-отзивчиви и спестява честотна лента, като се налага само да презаредите малка част от данни вместо цялата страница. Ето някои основни случаи на използване на AJAX:

• Редовно проверявайте за нови имейли.
• Актуализирайте рейтинг на футбол на живо на всеки 30 секунди.
• Актуализирайте цената за онлайн търг.

AJAX предоставя на вас, разработчика, почти неограничена способност да правите уеб страници бързи, отзивчиви и бързи - нещо, за което посетителите ви ще ви благодарят.

HTML

Преди да започнете, имате нужда от HTML формуляр. Ако не знаете какво е HTML, прочетете нашето ръководство за как да направите уебсайт за начинаещи Как да си направим уебсайт: за начинаещиДнес ще ви насоча през процеса на изработка на цялостен уебсайт от нулата. Не се притеснявайте, ако това звучи трудно. Ще ви преведа през всяка стъпка от пътя. Прочетете още .

Ето HTML код, от който се нуждаете:

 Име: Възраст: 

Този html определя форма с няколко елемента. Забележете как има действие и метод атрибути. Те определят къде и как се подава формулярът. Те не са необходими, когато използвате AJAX, но е добра идея да ги използвате, тъй като гарантира, че посетителите на вашия уебсайт все още могат да го използват, ако имат деактивиран JavaScript. Тази страница включва jQuery, хоствано от Google на тяхната CDN Какво представляват CDN и защо съхранението вече не е проблемCDN правят Интернет бърз и уебсайтове достъпни дори когато мащабирате до милиони потребители. Първо, честотната лента струва пари; тези от нас на ограничени договори знаят това твърде добре. Не само вие ... Прочетете още . Най- глава съдържа a писменост етикет - тук ще напишете кода си.

Тази форма може да изглежда малко скучна в момента, така че може да искате да помислите учене на CSS 5 бебешки стъпки за научаване на CSS и ставане на Kick-Ass CSS магьосникCSS е единствената най-важна промяна на уеб страниците през последното десетилетие и проправи пътя за разделянето на стила и съдържанието. По модерен начин XHTML определя семантичната структура ... Прочетете още да го оживя малко.

JavaScript

Има няколко начина да изпращате формуляри с JavaScript. Първият и най-лесен начин за това е чрез Изпращане метод:

document.getElementById ( 'myForm ") представя (.);

Можете, разбира се, да насочите формата с jQuery, ако предпочитате - няма значение:

. $ ( "# MyForm") представя ();

Тази команда казва на браузъра ви да изпрати формуляра, точно като натискане на бутона за изпращане. Той е насочен към формуляра по своя идентификатор и в този случай това е myForm. Това не е AJAX, така че ще се зареди цялата страница - нещо, което не винаги е желателно.

В метод атрибут на формуляра си, посочихте как да го изпратите. Това може да бъде POST или GET. Този атрибут не се използва при изпращане на формуляри, използвайки AJAX, но може да се използва същия метод.

Голяма част от съвременната мрежа се изпълнява от GET или POST заявки. Най-общо GET се използва за извличане на данни, докато POST се използва за изпращане на данни (и връщане на отговор). Данните могат да бъдат изпращани с GET, но POST почти винаги е по-добрият избор - особено за данните от формуляра. Може да сте виждали GET заявки и преди - те изпращат данните, прикачени към URL адреса:

somewebsite.com/index.html? име = Джо

Въпросният знак казва на браузъра, че всички данни, непосредствено след него, не трябва да се използват за преминаване през уебсайта, а вместо това трябва да бъдат предадени на страницата, за да бъдат обработени. Това работи добре за прости неща като номер на страница, но има някои недостатъци:

Максимално ограничение на знака: Има максимален брой знаци, които могат да бъдат изпратени в URL. Може да не ви е достатъчно, ако се опитвате да изпратите голямо количество данни.
Видимост: Всеки може да види данните, изпращани в GET заявка - не е полезно за чувствителни данни, като пароли или данни от формуляри.

POST заявките работят по подобен начин, само че те не изпращат данните в URL адреса. Това означава, че може да бъде изпратен по-голям обем данни (данните са известни като полезен товар), а известна сигурност се получава, като не се излагат данните. Все пак данните могат лесно да бъдат достъпни, така че погледнете в SSL сертификат Какво е SSL сертификат и имате ли нужда от такъв?Сърфирането в Интернет може да бъде страшно, когато става въпрос за лична информация. Прочетете още ако искате пълно спокойствие.

Независимо дали се използва POST или GET, данните се изпращат ключ -> стойност двойки. В URL адреса по-горе ключът е име, а стойността е Джо.

По-добрият начин за подаване на формуляри е използването Асинхронен JavaScript и XML (AJAX). JavaScript поддържа AJAX разговори, но те могат да бъдат объркващи за използване. JQuery прилага тези същите методи, но го прави по лесен за използване начин. Можете да инструктирате браузъра си да изпълни GET или POST заявка - придържайте се към POST за този пример, но GET заявките се изпълняват по подобен начин.

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

$ .post ('some / url', $ ('# myForm'). serialize ());

Този код прави няколко неща. Първата част ($) позволява на браузъра ви да знае, че искате да използвате jQuery за тази задача. Втората част се обажда на пост метод от jQuery. Трябва да преминете в два параметъра; Първият е URL адресът за изпращане на данните, а вторият - данните. Може да откриете (в зависимост от URL адреса, до който се опитвате да получите достъп), че браузърите ви „ от един и същи произход тук може да се намеси политика за сигурност. Можете да активирате кръстосано споделяне на ресурси за да заобиколите това, но просто е достатъчно да посочите URL адрес, хостван в същия домейн като вашата страница.

Вторият параметър извиква jQuery издавам на части метод на вашата форма. Този метод осъществява достъп до всички данни от вашата форма и ги подготвя за предаване - той ги сериализира.

Този код сам по себе си е достатъчен, за да изпратите формуляр, но може да откриете, че нещата действат малко странно. Добре е да проучите инструментите за разработчици на браузъра си, тъй като те правят грешката за отстраняване на грешки в мрежата.

Като алтернатива, пощаджия е отличен безплатен инструмент за тестване на HTTP заявки.

Ако искате да изпратите формуляра си чрез AJAX, когато натиснете бутона за изпращане, това е също толкова лесно. Трябва да прикачите кода си към Изпращане събитие от формата. Ето кода:

$ (document) .on ('submit', '# myForm', function () {$ .post ('some / url', $ ('# myForm'). serialize ()); върнете невярно; });

Този код прави няколко неща. Когато формата ви бъде изпратена, идва вашият браузър и стартира кода ви първо. След това вашият код изпраща данните от формуляра, използвайки AJAX. Последната необходима стъпка е да се предотврати изпращането на оригиналната форма - вече сте направили това с AJAX, така че не искате да се повтори!

Ако искате да изпълните някоя друга задача, след като AJAX приключи (или може би дори върне съобщение за състояние), трябва да използвате обаждане. JQuery прави тези много лесни за използване - просто предавайте функция като друг параметър като този:

$ .post ('url', $ ('# myForm'). serialize (), функция (резултат) {console.log (резултат); }

Най- доведе до аргументът съдържа всички данни, върнати от URL адреса, на който са изпратени данните. Можете лесно да отговорите на тези данни:

ако (резултат == 'успех') {// направете някаква задача. } else {// свърши някаква друга задача. }

Това е това за тази публикация. Да се ​​надяваме, че сега имате добро разбиране на HTTP заявки и как AJAX работи в контекста на форма.

Научихте ли някакви нови трикове днес? Как използвате AJAX с формуляри? Кажете ни вашите мисли в коментарите по-долу!

Образни кредити: vectorfusionart / Shutterstock