21. září bude sraz! Od 18.00 v restauraci Tradice v Praze u Anděla
Autor Zpráva
jqueryAmater
Profil *
Zdravím,

snažím se napsat přihlašovací formulář a všechno funguje, jak má. Chtěl bych ale přidat odesílání formuláře přes AJAX s použitím jQuery. Po odeslání by to mělo zobrazit div (s loading gifem) a pokud vše proběhne úspěšně, dojde k přesměrování.

Problém je, že nevím, jak to napsat. Proto bych vás chtěl požádat o nějaké tipy, návody nebo klidně hotová řešení.

Děkuji mnohokrát
Taps
Profil
jqueryAmater:
http://www.9lessons.info/2014/07/ajax-php-login-page.html
Jinak samozřejmě Google -> https://www.google.cz/?gws_rd=ssl#q=ajax+php+login+form
Corwin
Profil
v oficiální dokumentaci jQuery si najdi .ajax. formulář předáš do postu jako .serialize(). na klik zobrazíš loadovací kolečko, jakmile proběhně success requestu, kolečko skryješ.

nějak takto třeba.

$('form#login').submit(function(){
  $('.loading').show();
  $.ajax({
    type : 'POST',
    url : 'url kam to pošleš',
    data : $('form#login').serialize(),
    success : function(data){
        window.location.href = 'redirekt url';
    }
  })
});
_es
Profil
jqueryAmater:
a pokud vše proběhne úspěšně, dojde k přesměrování.
Keď má dojsť aj tak k načítaniu celej novej stránky, prečo to nie je „normálny“ formulár? Čo AJAXom v tomto prípade získaš?
Keeehi
Profil
_es:
Řekl bych že mu jde o nerefreshování stránky při špatně zadaných údajích.
_es
Profil
[#5] Keeehi:
A to „vyváži“ to, že pri správne zadaných údajoch bude trvať načítanie stránky dlhšie (o ten AJAXový dotaz), než pri normálnom formulári?
Keeehi
Profil
_es:
Ale vždyť se to dá udělat tak, aby byl rozdíl nepostřednutelný.
- Pokud po odeslání má následovat přesměrování i bez použití javascriptu, je to rychlé úplně stejně.
- Pokud se nemá po odesílání přesměrovávat, může se v odpovědi poslat celá stránka kterou javascript nahradí tu aktuální.
V obou prípadech se provede stejný počet requestů a přenese přibližně stejný počet dat. Tažkže jediný rozdíl by měl být akorát v tom, jak rychle to zvládne javascript provést a to nebude moc.
Chamurappi
Profil
Reaguji na Keeehiho:
Další rozdíl je v tom, že při AJAXovém způsobu nebude prohlížeč považovat formulář za odeslaný. Což znamená, že si neuloží náplň políček do historie a nevybídne k zapamatování hesla. V důsledku je takový formulář z pohledu uživatele hloupější než ten, který ho odvede na jinou stránku.

Lepší je v takové situaci použít <iframe>, pokud je opravdu nezbytné neodcházet. U přihlašovacího formuláře bych se na to vybodnul, protože přínos takovéto speciální péče o uživatele, kteří zadávají špatné údaje, nepřevyšuje nad potenciálními nevýhodami pro zbytek uživatelů (který je velmi pravděpodobně větší). Případná rozmluva se zákazníkem ve stylu „Nedaří se mi přihlásit.“ – „A co vám to hlásí?“ – „Nic, jen se mi tu točí takové kolečko.“ sice vystihne krásy obrázku loading.gif, ale k odstranění závady nepomůže.

Ale vždyť se to dá udělat tak, aby byl rozdíl nepostřehnutelný.
To asi ano, za běžného stavu se AJAXem odesílají příspěvky i na této diskusi a skoro nikdo si to neuvědomuje. (Má to samozřejmě dobrý důvod.)
quyen
Profil *
Chamurappi:
Případná rozmluva se zákazníkem ve stylu „Nedaří se mi přihlásit.“ – „A co vám to hlásí?“ – „Nic, jen se mi tu točí takové kolečko.“ sice vystihne krásy obrázku loading.gif, ale k odstranění závady nepomůže.

a co by si po klientech jeste chtel? cislo radku, kde je chyba?
_es
Profil
Keeehi:
Ale vždyť se to dá udělat tak, aby byl rozdíl nepostřednutelný.
Čo presne je „nepostrehnuteľné“? Ak je nejaké pomalšie pripojenie, alebo sa pripája návštevník z väčšej diaľky? Musí to byť logicky pomalšie než normálny formulár, ktorý vráti odpoveď zo servera.

Pokud po odeslání má následovat přesměrování i bez použití javascriptu, je to rychlé úplně stejně.
Nemôže to rovnako rýchle, lebo sa najprv vyčkáva na odpoveď AJAXového dotazu a až potom je presmerovanie, pričom mohlo byť presmerované hneď.

Pokud se nemá po odesílání přesměrovávat, může se v odpovědi poslat celá stránka kterou javascript nahradí tu aktuální.
Ale to je celkom iné riešenie dotazu, na ktoré sa jqueryAmater nepýtal ([#1]) a asi ani nie je v jeho silách.
Chamurappi
Profil
Reaguji na quyena:
a co by si po klientech jeste chtel? cislo radku, kde je chyba?
Čím víc informací z nich vymáčknu, tím lépe. Obvykle umějí poslat screenshot. Když na něm uvidím chybu 503, je jasné, o co jde. Když tam uvidím nějakou hlášku od proxy serveru, také tuším, co se děje. Když se jim načte stránka nějak pochroumaná, nebo odsazená, nebo úplně jiná stránka než by měla, je to též indicie. Z točícího kolečka se nedozvím vůbec nic.


Reaguji na _es:
Čo presne je ‚nepostrehnuteľné‘?
Celkem běžné je, že server po úspěšném POSTu přesměruje na GET, aby návštěvníkem vyvolané znovunačtení stránky nevyvolávalo znovuodeslání dat. Tazatelova situace je srovnatelná, akorát je přesměrování v režii klienta a ne serveru. O rychlost bych se moc nestrachoval.
Keeehi
Profil
_es:
Nemôže to rovnako rýchle, lebo sa najprv vyčkáva na odpoveď AJAXového dotazu a až potom je presmerovanie, pričom mohlo byť presmerované hneď.
Počet http požadavků je stejný. Přesměrování vždy iniciuje prohlížeč návštěvníka. Při standardním přesměrování podle toho hlavičky location, při ajaxovém zpracování to provede javascript. Rozdíl je akorát v tom, jak rychle dokáže prohlížeč zpracovat 301 přesměrování a jak rychle to provede jvascript z odpovědi servru. Rychlost sítě tu však nemá vliv.

Ale to je celkom iné riešenie dotazu, na ktoré sa jqueryAmater nepýtal ([#1]) a asi ani nie je v jeho silách.
Tu možnost jsem zmiňoval proto, aby to bylo kompletní. Abych vyvrátil tvoje tvrzení „A to ‚vyváži‘ to, že pri správne zadaných údajoch bude trvať načítanie stránky dlhšie (o ten AJAXový dotaz), než pri normálnom formulári?“. Že se to dá napsat tak, aby žádný dotaz navíc nevznikl.
_es
Profil
Keeehi:
Počet http požadavků je stejný. Přesměrování vždy iniciuje prohlížeč návštěvníka.
Myslel som voči situácii, keď presmerovanie vôbec nie je. No keď v [#11] Chamurappi popisuje, že je presmerovanie aj tak vhodné z iných dôvodov, tak je to jedno.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0