Home > Programowanie, Webmastering > AJAX w jQuery dla początkujących

AJAX w jQuery dla początkujących

18 kwietnia 2010 Zostaw komentarz Idź do komentarzy

Szybki i lekki kurs dla początkujących pod tytułem: AJAX w jQuery. Innymi słowy, jak przy pomocy tej biblioteki załadować dynamiczną treść bez przeładowania strony.

Wszystko czego będziemy potrzebować to biblioteka jQuery, dobre chęci oraz szczypta zapału. Przechodzimy na stronę jquery.com i pobieramy najnowszą wersję skryptu.

Ja na potrzeby tego wpisu stworzyłem sobie dwa pliki, pierwszy będący główną stroną która będzie korzystać z techniki AJAX, oraz drugą zawierającą ładowane treści – obie jako skrypty PHP, aby nie było zbyt nudno. Ok, przechodzimy do działania.

Pierwszym krokiem będzie dołączenie do dokumenty biblioteki jQuery w sekcji head strony:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Najprostszy przypadek

Czyli zwyczajne załadowanie zawartości innego pliku html/php bez przeładowania strony.

Dodam do naszej strony dwie warstwy, jedną która będzie przyjmować ładowane treści, i drugą z przyciskiem wywołującym zdarzenie.

<div id="box"></div>
<div><input id="btn" type="button" value="Wyślij"></div>

Teraz pozostaje nam już tylko dodanie akcji do przycisku.

$(document).ready(function(){
  $('#btn').click(function(){
    $('#box').load('data.php');
  });
});

Może czas na wyjaśnienie powyższego kodu. Pierwsza linia przypisuje zdarzeniu załadowania strony funkcję w której określamy co ma się dziać. Jest to wymagane podczas używania jQuery (i nie tylko), aby mieć pewność że struktura dokumentu widziana przez przeglądarkę jest kompletna. Kolejno elementowi o identyfikatorze btn przypisujemy zdarzenie kliknięcia w którym do elementu box ładujemy przy pomocy funkcji .load dane z pliku data.php.

W data.php umieściłem zwyczajowy tekst, równie dobrze może to być plik html. Przy tak przygotowanym kodzie, kliknięcie przycisku „Wyślij” powinno skutkować pojawieniem się nad nim treści zawartej w zewnętrznym pliku.

Kompletny kod całego dokumentu wygląda następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#btn').click(function(){
          $('#box').load('data.php');
        });
      });
    </script>
  </head>
  <body>
    <div id="box"></div>
    <div><input id="btn" type="button" value="Wyślij"></div>
  </body>
</html>

Przekazywanie parametrów

Jeśli powyższy przypadek chcielibyśmy wzbogacić o przekazanie jakichś parametrów do wywoływanego pliku data.php, musimy rozbudować nieco funkcję .load.

$('#box').load('data.php', {index: 4, str: 'abc'});

Drugi parametr określa tablicę par klucz: wartość. Dane te są przesyłane metodą POST, zatem mamy do nich łatwy dostęp w docelowym skrypcie php. Przykładowa zawartość data.php:

Index: <?php echo $_POST['index']; ?><br>
Ciąg znaków: <?php echo $_POST['str']; ?>

Tym sposobem możemy wpływać na to co ma zostać załadowane. Podawane dane możemy odczytać z pola tekstowe lub innych zmiennych – wszystko zależy od naszej inwencji oraz umiejętności pisania w JavaScript.

Wysyłanie formularzy

Ostatnim punktem będzie wysłanie formularza. Można by oczywiście skorzystać z powyższej metody kopiując zawartości pól formy, jednak było by to mało wygodne. My skorzystamy z funkcji .serializeArray.

Zmodyfikowałem zawartość dokumentu wzbogacając go o prosty formularz z dwoma polami:

<div id="box"></div>
<div>
  <form id="form">
    Pole 1: <input type="text" name="pole1"><br>
    Pole 2: <input type="text" name="pole2"><br>
    <input id="btn" type="button" value="Wyślij">
  </form>
</div>

Kolejno modyfikujemy kod JavaScript:

$('#box').load('data.php', $('#form').serializeArray());

Tym sposobem, do pliku data.php zostanie przekazana zawartość pól formularza o identyfikatorze form. Co z nimi zrobimy, zależy już od nas.

Podsumowanie

Mam nadzieję iż chociaż troszkę pomogłem osobą które po raz pierwszy próbowały użyć technologii AJAX przy pomocy jQuery. Bardziej zaawansowanym polecam zapoznanie się z resztą funkcji dostępnych w jQuery, które dają większe możliwości manipulacji danymi i tym co się dzieje podczas wywołania asynchronicznego.

Kategorie:Programowanie, Webmastering Tagi:, , , ,
  1. Kuba
    1 maja 2010 at 18:08 | #1
    Odpowiedz | Cytuj

    Ostatni raz cokolwiek kodowałem w zeszłe wakacje i już prawie wszystko pozapominałem. Dzięki za odświeżenie pamięci.

  2. slawek
    31 grudnia 2010 at 20:12 | #2
    Odpowiedz | Cytuj

    A jak załadować automatycznie dane z pliku bez klikania w przycisk, i w odstępie czasu
    np.co 1 minutę

  1. Brak jeszcze trackbacków