jQuery – dodawanie rekordów bez przeładowania

Dzięki jQuery, a dokładniej modułowi do obsługi wywołań ajaxowych, można na stronie przygotować prosty mechanizm pozwalający dodawać dane do bazy bez przeładowywania strony.

Na początek należy określić w jaki sposób będą prezentowane dane (niezależne od siebie divy, tabelka, itd.). Następnie dodajemy na stronie zwykły formularz. Dzięki temu niezależnie od sytuacji będziemy w stanie dodać nowe rekordy do bazy (jako action formularza skrypt przyjmujący dane przesłane poprzez $_POST). Gdy już upewnimy się, że formularz działa poprawnie doczepiamy się do wydarzenia onsubmit/click:

$("#guzik_submit").click( wyslij ) ;
$("#formularz").submit( wyslij ) ;
<form id="formularz" onsubmit="return wyslij()" href="skrypt.php" method="post">

1. podpięcie się do guzika wysyłającego formularz
2. podpięcie się do wydarzenia wysyłania formularza
3. podpięcie się do formularza (zwykły js)

Niezależnie od wybranej metody rezultatem powinno być false (inaczej formularz wyśle się zwyczajną drogą).

W wywoływanej funkcji zbieramy nazwy pól oraz wprowadzone wartości. Może to być wykonane ręcznie lub poprzez zautomatyzowany skrypt, np:

<script type="text/javascript">
function getFormValues(fobj) {
 var str = "";
 var obj = '' ;
 for(var i = 0;i < fobj.elements.length;i++) {
  obj = fobj.elements[i] ;
  switch(obj.type){
   case "text":
    str += obj.name + "=" + escape(obj.value) + "&";
   break;
   case "textarea":
    str += obj.name + "=" + escape(obj.value) + "&" ;
   break;
   case "hidden":
    str += obj.name + "=" + escape(obj.value) + "&";
   break ;
   case "select-one":
    str += obj.name + "=" + obj.options[obj.selectedIndex].value + "&";
   break;
  }
 }
 str = str.substr(0,(str.length - 1));
 return str;
}
</script>

(skrypt ograniczony jest tylko do kilku pól).

Gdy już mamy wszystkie pola z formularza sklejone w jeden ciąg wywołujemy odpowiedni skrypt js:

<script type="text/javascript">
function wyslij() {
 f = $("#formularz") ;
 txt = getFormValues( f[0] )  ;
 txt = escape( txt ) ;
 $.ajax( {
   type: "POST",
   url: "skrypt_obslugujacy_wyslane_dane.php",
   data: "txt="+txt,
// dane mogą być także przesłane bez "txt="+ i bez escape, wtedy każde pole z formularza będzie szło jako osobna zmienna
   success: function(result) {
     // tutaj obsługa odesłanych danych
     odbierz_dane( result ) ;
   }
 } ) ;
 return false ;
}
</script>

który poprzez $.ajax odwołuje się do pliku php:

<?
 // tablica, w której znajduje się zmienna txt, zależy od pola type, w $.ajax
 $txt = $_POST['txt'] ;
 $str = explode( "&", $txt ) ;
 $post = array() ;
 $c = count( $str ) ;
 for( $a = 0 ; $a < $c ; $a++ ) {
  $ent = explode( "=", $str[$a] ) ;
  // $ent[0] - nazwa pola
  // $ent[1] - wpisana wartość
  $post[$ent[0]] = urldecode( $ent[1] ) ;
 }
 // zapis danych z $post do bazy
 $query = "insert into ..... " ;
 $result = mysql_query( $query ) ;
 if( $result ) {
   $id = mysql_insert_id() ;
   // nazwa tabeli oraz klucza mogą być inne, zadziała o ile w tabeli występuje kolumna INT AUTOINCREMENT
   $result = mysql_query( "select * from tabela where id = '$id'" ) ;
   $out = mysql_fetch_assoc( $result ) ;
   $out['ajax_result'] = 1 ;
 }
 else {
   $out['ajax_result'] = 0 ;
   $out['txt'] = mysql_error() ;
 }
 echo json_encode( $out ) ;
?>

Jak może wyglądać obsługa odesłanych danych ? Powiedzmy, że dane zawarte w $post zostaną wstawione do bazy.
Przy pomocy mysql_insert_id możemy pobrać id nowo wstawionego rekordu, odczytać go z bazy i odesłać jako json (odesłanie danych wziętych z bazy pozwoli od razu wykryć ewentualne problemy, json zapewni odpowiedni format bez konieczności wymyślania własnego):

<script type="text/javascript">
function odbierz_dane( result ) {
 // do wartości zapisanych w result odwołujemy się poprzez: result.nazwa_pola_w_tablicy
 if( result.ajax_result == 0 ) alert( result.txt ) ;
 else {
  // formatowanie danych i dodanie do odpowiedniego obiektu
 }
}
</script>

O czym jeszcze warto pamiętać ?

Wywołanie skryptu dodającego dane do bazy może trochę potrwać, dlatego też dobrze jest pokazać jakąś animację świadczącą o tym, że zadziałało i że trzeba chwilkę poczekać. Dodatkowo sam formularz można ukryć, wyczyścić lub zablokować, żeby nie dopuścić do wielokrotnego dodania tych samych danych.

Pliki do pobrania: jquery – rekordy

• Tweet
• Pin It