Pobieranie / wysyłanie danych za pomocą ajax

Kaczy · 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:
[code]<!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>[/code]

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

Jak widać nie jest to wcale trudne, a może znacznie polepszyć wizerunek naszej strony.

(voythas) · Styczeń 29, 2011, 15:35:45

Nieźle, szkoda tylko, że nie wyświetla polskich liter, ale to kwestia kodowania już.

Kaczy · Styczeń 29, 2011, 15:36:00

w PHP możesz zamieniać polskie litery na ich odpowiedniki w UTF-8, bo takie kodowanie zwraca JQuery

czarnowidz · 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 ^^

Abik · Styczeń 29, 2011, 15:36:33

niezłe, dzięki Kaczy ^^

Forum graficzne Burning-Brushes.pl

Pobieranie / wysyłanie danych za pomocą ajax

Kaczy

Styczeń 29, 2011, 15:33:58

(voythas)

Styczeń 29, 2011, 15:35:45 #1

Kaczy

Styczeń 29, 2011, 15:36:00 #2

czarnowidz

Styczeń 29, 2011, 15:36:20 #3

Abik

Styczeń 29, 2011, 15:36:33 #4