Forum graficzne Burning-Brushes.pl

Tutoriale graficzne i materialy => Pozostałe tutoriale => Tutoriale JavaScript/jQuery => Wątek zaczęty przez: Kaczy w Styczeń 29, 2011, 15:33:58

Tytuł: Pobieranie / wysyłanie danych za pomocą ajax
Wiadomość wysłana przez: Kaczy w Styczeń 29, 2011, 15:33:58
JQuery - biblioteka języka JavaScript, dzięki której w łatwy sposób możemy wykonać wiele przydatnych rzeczy na naszą stronę. Skrypty JQuery możemy stosować w dowolnym miejscu na stronie.

A więc po tym krótkim uświadomieniu przejdźmy do rzeczy ;) jest kilka metod pobierania i wysyłania danych do plików php bez przeładowania strony, między innymi load, na niej się dziś skupimy.

A więc zacznijmy, jak zapewne się domyślacie funkcja ta słuzy do pobierania danych (load - ładuj). Można nią jednak równiez wysłać pewne informacje, oto przykład:
http://www.luzzak.pl/bb/load/
w pole tekstowe wpiszcie swoje imię, jak widać zwróci to nam wynik "Witaj {imie}!".

Oto cały kod tego skryptu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-2" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> //Pobieramy najnowszą wersję JQuery
<title>Ajax - load()</title>
</head>
<body>
<script>
$(document).ready(function(){ //Tym zaczynamy nasz skrypt
   $('input.wyslij').click(function(){//Jeśli klikniemy w input w KLASIE wyslij
    $('#tekst').hide("fast"); //chowa nam coś o ID tekst
     var login1 = $("#login").val(); //val służy do pobierania zawartości inputów, text do pobierania tekstu z innych znaczników (np. <span> </span>).
     var login = login1.replace(" ","%20"); //jedna wada JQuery, skrypt nawala gdy są spacje, więc zamieniamy nje na ich odpowiednik: %20
      $("#tekst").load('load.php?login='+login,{},function(){ //ładujemy nasz plik ze zmienna login (można również dać plik bez zmiennych, wtedy pobierze nam "sztywną" wartość)
$(this).show("slow"); //pokazuje nam coś o ID, które zdefiniowaliśmy w matczynej funkcji (tej, w której znajduje się aktualna)
});
return false; //a to zapobiega przeładowaniu się strony po naciśnięciu na button
      });
});
</script>
<div id="tekst"> //nasze "coś" o ID tekst
<input type="text" id="login" /><br /> //Input o ID login
<input type="submit" class="wyslij" value="Wyslij" /> // Button w klasie wyslij
</div>
</body>
</html>


Natomiast skrypt load.php, którego ja użyłem wygląda następująco:
<?php
$login=str_replace("%20", " ", $_GET['login']); //zamieniamy %20 na zwykłą spację
echo "Witaj $login!"; // wyświetlamy nasz wynik
?>

Jak widać nie jest to wcale trudne, a może znacznie polepszyć wizerunek naszej strony.
Tytuł: Odp: Pobieranie / wysyłanie danych za pomocą ajax
Wiadomość wysłana przez: (voythas) w Styczeń 29, 2011, 15:35:45
Nieźle, szkoda tylko, że nie wyświetla polskich liter, ale to kwestia kodowania już.
Tytuł: Odp: Pobieranie / wysyłanie danych za pomocą ajax
Wiadomość wysłana przez: Kaczy w Styczeń 29, 2011, 15:36:00
w PHP możesz zamieniać polskie litery na ich odpowiedniki w UTF-8, bo takie kodowanie zwraca JQuery
Tytuł: Odp: Pobieranie / wysyłanie danych za pomocą ajax
Wiadomość wysłana przez: czarnowidz w Styczeń 29, 2011, 15:36:20
Zastosowanie JQuery można zauważyć na mojej stronie :
http://szukajkamp3.info/
Po zalogowaniu się dodaj jakieś piosenki do playlisty, później wejdź w zarządzanie playlistą - w tych 2 miejscach widać jak to działa ^^
Tytuł: Odp: Pobieranie / wysyłanie danych za pomocą ajax
Wiadomość wysłana przez: Abik w Styczeń 29, 2011, 15:36:33
niezłe, dzięki Kaczy ^^