by Piotr Pelczar | jQuery, JS/Ajax, Publikacje in , , , ,

jQuery form post ajax request

Już kiedyś interesowałem się jQuery, ale w związku z podjęciem się nowego, dużego projektu postanowiłem pogłębić swoją wiedzę i pobawić się tą biblioteką.

Jako, że klient ma bzika na punkcie przeładowań ajax postanowiłem zaimplementować automatyczne przesyłanie formularzy w tle i wklejanie w <body> response żądania. Od strony PHP sprawa wygląda bardzo prosto – jeżeli request został wysłany przez jQuery, wyświetlamy tylko to, co jest pomiędzy <body> i </body>. Po wysłaniu requesta, jQuery powinno wkleić wynik do body na naszej stronie.

Przykładu nie będę tłumaczył, bo wydaje mi się trywialny.

Dodatkowe ficzery:

  • disable submita do momentu, aż ajax nie otrzyma odpowiedzi (aby użytkownik nie mógł kliknąć drugi raz),
  • automatyczne wykrywanie adresu URL, do którego odnosi się formularz (jeżeli nie sprecyzowano atrybutu action, wówczas wysyłamy żądanie do window.location).

Aby nasz formularz zaczął przesyłać dane w tle wystarczy dołączyć plik jquery.autoload, a w kodzie napisać:

$(document).ready(function() {  InitAjaxPost(' ... SUBMIT_ID ... '); });

Ten sposób nie rozwiązuje przesyłania pól typu file.

 

8 thoughts on “jQuery form post ajax request”

  1. Generalnie znowu wynajdujesz koło na nowo. Po co to? Właśnie tym postem pokazałeś, że „do less, write more”. Takie moje zdanie 😉

    1. Blog nie jest prowadzony dla pro, ale dla rozpoczynających zabawę z jQuery również. Osobiście znalazłem jedną stronę, która pokazywała jak przesłać formularz w jQuery ajax bez pluginu form – z serializacją. Kod bez pluginu jest lżejszy, więc miałbym wątpliwości do Twojej inwersji cytatu z obrazka.

      Mam nadzieję, że wpis przyda się niektórym użytkownikom.

  2. Dodaj pole typu FILE i już sobie tego tak nie wyślesz. Dopisanie tego to kolejne linijki kodu. A po co? Skoro jest jQuery.Form ?

    1. Do prostych rozwiązań używa się prostych, ale sprawdzonych rzeczy. To tak, jakby do portfolio z dwoma podstronami użyć jakiegoś rozbudowanego frameworka MVC.

      Faktycznie, zapomniałem wspomnieć we wpisie, że formularz ten nie obsługuje pól typu file, ale zaraz to zrobię, także słuszna uwaga. Natomiast jeżeli chodzi o prosty formularz rejestracji – takie podejście jest jak najbardziej uzasadnione.

  3. Mnie natomiast ciekawi sam sens odświeżania całego za pomocą Ajax 😉 No chyba że tak sobie klient wymyślił 😉

  6. Dziekuje za ten skrypt. To jest to czego szukalem. Jest tylko jeden problem. Jak zrobic aby inne skrypty na stronie dzialaly po wyslaniu formularza? Po wyslaniu formularza wszystko jest ok poza dodawaniem do kodu rzeczy wygenerowanych przez inne skrypty. Inaczej mowiac skrypty ktore znajduja sie na stronie do ktorej prowadzi formularz nie sa uruchamiane.

Comments are closed.