wtorek, 17 lipca 2012

Szybki sposób na Ajax na formularzu niezależny od ilości pól

Często zdarza się, że chcemy przekazać jakieś dane z formularzy bez przeładowywania strony użytkownikowi - wówczas najlepiej sięgnąć po Ajax'a. Jednakże nikomu nie chce się pisać różnych skryptów Ajax w zależności od pól formularza, metody czy akcji. Dlatego też pokarzę dzisiaj w jaki sposób stworzyć jeden uniwersalny kod Ajax pobierający dane z z różnych formularzy, niezależnie od ich złożoności oraz parametrów;



Przykładowe kod formularzy:
<form action="dodajDoBazy.php" method="POST">
   <input type="text" value="" name="pole1" />
   <input type="text" value="" name="pole2" />
   <input type="chekbox" name="wybor[]" value="wybor_1" />
   <input type="chekbox" name="wybor[]" value="wybor_2" />
   <input type="chekbox" name="wybor[]" value="wybor_3" />
   <input type="submit" name="dodaj" value="dodaj" />
</form>
<form action="wypiszZBazy.php" method="GET">
   <input type="text" value="" name="pole1" />
   <input type="text" value="" name="pole2" />
   <input type="chekbox" name="wybor[]" value="wybor_1" />
   <input type="chekbox" name="wybor[]" value="wybor_2" />
   <input type="chekbox" name="wybor[]" value="wybor_3" />
   <input type="submit" name="usun" value="usun" />

</form>

Poniższy skrypt zadziała z w/w formularzami jak i z każdym innym rodzajem formularza.
Kod ajax [z jQuery] Skrypt zadziała na każdy formularz [form] umieszczony na stronie.
<script>
  $("form").submit(function(){
   $.ajax({
     type: this.method,
     url: this.action, // 1

     data: $(this).serialize(),
     success: function(data){
     },
     error: function(data){
     }
   });
   return false;
 });
</script>
A.D 1 można użyć również konstrukcji typu 'ajax' +this.action, wówczas dla powyższych formularzy zostaną wywołane akcje ajaxdodajDoBazy.php oraz ajaxwypiszZBazy.php, dzięki czemu w plikach nie zawierających w nazwie ajax możemy umieścić standardowe strony, do których użytkownik przejdzie po wykonaniu formularza w razie gdyby posiadał wyłączoną obsługę JavaScript bądź skrypty odpowiedzialne za Ajax nie zdążyły się załadować.

Brak komentarzy:

Prześlij komentarz