jQuery #3 – AJAX i obsługa formularzy

Sty 09
2012

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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>

DEMO

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.

Jeden komentarz w “jQuery #3 – AJAX i obsługa formularzy”

  1. Lisio jest złe napisał/a:

    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?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *