Tak jak i ostatnio obiecałem w dzisiejszej części kursu jQuery nauczymy się korzystać z zapytań AJAX. Przedstawię w jaki sposób możemy załadować dane z dowolnego pliku do kontenera będącego divem. Ponadto wspomnę w jaki sposób przy pomocy AJAXa możemy obsługiwać skrypt wyszukiwarki, bądź dowolny inny formularz.
Ładowanie zewnętrznych plików
Do wczytywania danych z pojedynczych plików wcale nie potrzebujemy zaawansowanych konstrukcji AJAXa. Wystarczy nam jedynie funkcja load(), która jako parametr przyjmuje nazwę pliku, który chcemy wczytać.
Spróbujmy wczytać dane do naszego kontenera z pliku plik.txt. Kontenerem może być dowolny znacznik, do którego odwołujemy się poprzez znaną nam już funkcję $(), bądź jQuery().
Jestem plikiem plik.txt
<html>
<head>
<title>Kurs jQuery #3 example 1</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#kontener").load("plik.txt");
});
</script>
</head>
<body>
<div id="kontener"></div>
</body>
</html>Możemy oczywiście rozszerzyć przykład o obsługę zdarzenia kliknięcia w link.
<html>
<head>
<title>Kurs jQuery #3 example 2</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#link").click(function() {
$("#kontener").load("plik.txt");
});
});
</script>
</head>
<body>
<a id="link" href="#">Klik</a>
<div id="kontener"></div>
</body>
</html>Jeśli chcielibyśmy osiągnąć efekt animacji, o którym wspominałem w poprzednim artykule należy dodać do funkcji load() parametr function(), w którym będziemy mogli wykonać kod po załadowaniu tekstu do kontenera. Aby móc ujrzeć efekt wypełnijmy plik plik2.txt kilkoma linijkami tekstu z załamaniem linii <br />.
Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br /> Jestem plikiem plik2.txt<br />
<html>
<head>
<title>Kurs jQuery #3 example 3</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#link").click(function() {
$("#kontener").load("plik2.txt", function() {
$("#kontener").show("slow");
});
});
});
</script>
</head>
<body>
<a id="link" href="#">Klik</a>
<div id="kontener" style="display:none;"></div>
</body>
</html>Poprzez load() możemy bez problemu załadować także pliki z rozszerzeniami *.html, *.php itd.
Wysyłanie danych do skryptu *.php – AJAX()
Potrafimy już pobierać zawartość różnych plików. Często jednak przychodzi potrzeba wysłania danych do jakiegoś skryptu bez przeładowania strony. Do tych celów stworzono właśnie AJAX.
Dla przykładu, przed wysłaniem danych do pliku *.php, który je przetworzy wczytajmy dane znajdujące się w naszym pliku plik.txt przy pomocy funkcji ajax().
<html>
<head>
<title>Kurs jQuery #3 example 4</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#link").click(function() {
$.ajax({
url: "plik.txt",
success: function(msg) {
$("#kontener").text(msg);
}
});
});
});
</script>
</head>
<body>
<a id="link" href="#">Klik</a>
<div id="kontener"></div>
</body>
</html>Jak można zauważyć funkcja przyjmuje następującą konstrukcje
$.ajax({ parametry });
My użyliśmy dwóch parametrów. url – adres pod który ma zostać wysłane zapytanie AJAX oraz success – wywołujący funkcje, jeśli zapytanie zwróci wynik (dostępny pod zmienną msg).
Stwórzmy plik *.php pod nazwą php1.php z krótką instrukcją warunkową wyświetlającą odpowiedni komunikat w zależności od danych przesłanych metodą POST.
<?php
if(!isset($_POST['indeks'])) {
echo'Nie przeslano zmiennej "indeks"';
} elseif($_POST['indeks'] == "wartosc") {
echo'Zmienna "indeks" ma wartosc "wartosc"';
} else {
echo'Zmienna "indeks" NIE ma wartosci "wartosc"';
}
?>Teraz napiszmy skrypt wysyłający dane metodą POST do powyższego pliku.
<html>
<head>
<title>Kurs jQuery #3 example 5</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#link").click(function() {
$.ajax({
url: "php1.php",
type: "POST",
data: "indeks=wartosc&indeks2=wartosc2",
success: function(msg) {
$("#kontener").text(msg);
}
});
});
});
</script>
</head>
<body>
<a id="link" href="#">Klik</a>
<div id="kontener"></div>
</body>
</html>Jak można zauważyć funkcja ajax() przyjęła dodatkowe dwa parametry. Pierwszym z nich to type – przyjmuje wartość „POST” lub „GET” określając w jaki sposób przesłać dane do pliku podanego w parametrze url. Drugi parametr data – przechowuje nazwy zmiennych i ich wartości, które chcemy wysłać. Dane należy zapisać wg wzorca.
zmienna=wartosc&zmienna2=wartosc2…
Pobieranie danych z formularza
Przed łączeniem AJAXa z formularzem słów kilka o tym drugim. Przy pomocy jQuery w bardzo przyjemny sposób możemy pobierać dane wpisane w pola tekstowe. Przykładem pola tekstowego jest oczywiście input typu text.
<html>
<head>
<title>Kurs jQuery #3 example 6</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#guzik").click(function() {
var tekst = $('input[name=tekst]').val();
alert(tekst);
});
});
</script>
</head>
<body>
<form action="">
<input type="text" name="tekst" />
<input type="button" id="guzik" value="KLIK" />
</form>
<div id="kontener"></div>
</body>
</html>Zapis $(’input[name=tekst]’) informuje nasz skrypt, że chcemy odwołać się do wartości znacznika input o atrybucie name z wartością tekst. Nie musimy więc ograniczać się do podawania nazw klas i identyfikatorów. Pobranie danych z takiego pola tekstowego zawdzięczamy użyciu funkcji val().
Łączenie formularza z AJAXem
Tyle o pobieraniu danych z formularza. Napiszmy prosty skrypt, który wyśle dane wpisane w pole tekstowe do naszego wcześniejszego pliku php1.php.
<html>
<head>
<title>Kurs jQuery #3 example 7</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#guzik").click(function() {
var tekst = $('input[name=tekst]').val();
$.ajax({
url: "php1.php",
type: "POST",
data: "indeks="+tekst,
success: function(msg) {
$("#kontener").text(msg);
}
});
});
});
</script>
</head>
<body>
<form action="">
<input type="text" name="tekst" />
<input type="button" id="guzik" value="KLIK" />
</form>
<div id="kontener"></div>
</body>
</html>Analogicznie wewnątrz pliku php1.php możemy umieścić zapytanie do bazy danych z skryptem odpowiadającym za wyszukiwanie określonych informacji. To jednak zostawię w ramach zadania domowego. Myślę, że na tym etapie nauki nie będzie z tym dużych problemów.
To wszystko bardzo ładnie działa ale mam pytanie, jak to zrobić, żeby działało również po wciśnięciu entera przy inpucie, a nie tylko po wciśnięciu przycisku?