30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

1/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i

pliki tekstowe

Włodzimierz Gajda

Najważniejszą cechą witryn wykorzystujących technologię Ajax jest dynamiczna wymiana fragmentu

strony bez przeładowania całego dokumentu. W celu opanowania takiej techniki programowania proponuję

wykonanie czterech prostych ćwiczeń, w których dane są przechowywane w plikach tekstowych. Użycie

plików tekstowych upraszcza skrypty PHP, co pozwala skupić całą uwagę na Ajax-ie.

Spis treści

1. Przykład pierwszy: menu z obsługą zdarzenia onmouseover

1.1 Ajax

1.2 Rozwiązanie

2. Przykład drugi: rozwijanie i zwijanie

2.1 Ajax

2.2 Rozwiązanie

3. Przykład trzeci: okno popup

3.1 Ajax

3.2 Rozwiązanie

4. Przykład czwarty: zakładki

4.1 Ajax

4.2 Rozwiązanie

1. Przykład pierwszy: menu z obsługą zdarzenia onmouseover

Witryna przedstawiona na rysunkach 1 oraz 2 zawiera menu pionowe z tytułami płyt zespołów

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

2/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

rockowych. Po najechaniu wskaźnikiem myszki opcji menu, w treści strony pojawią się szczegółowe dane

wybranej płyty.

Rysunek 1. Pierwszy z przykładów po wskazaniu kursorem myszy płyty Super Truper zespołu ABBA

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

3/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Rysunek 2. Pierwszy z przykładów po wskazaniu kursorem myszy płyty Vol. 4 zespołu Black Sabbath

Przykład ten składa się z plików:

index.php

 — skrypt odpowiedzialny za drukowanie menu,

server.php

 — skrypt odpowiedzialny za zwracanie danych wybranej płyty,

xmlhttprequest.js

 — skrypt odpowiedzialny za utworzenie obiektu 

XMLHttpRequest

,

ajax.js

 — skrypt odpowiedzialny za przeładowanie treści po wskazaniu opcji menu kursorem

myszy.

Dane wyświetlane na stronie, a więc tytuły płyt oraz lista piosenek każdej płyty, są zapisane w plikach

tekstowych. Plik 

00lista.log

 zawiera listę wszystkich płyt, a szczegółowe dane każdej płyty są

zapisane w osobnym pliku w folderze 

plyty/

.

1.1 Ajax

W przykładzie tym Ajax jest wykorzystany do pobierania danych wskazanej płyty. Po najechaniu myszką

pozycji menu zostaje wysłane żądanie HTTP. Takie zachowanie jest możliwe dzięki zdefiniowaniu obsługi

zdarzenia 

onmouseover

 opcji menu. Żądanie HTTP jest wysyłane przez funkcję 

pobierz_dane()

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

4/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

obsługującą zdarzenie 

onmouseover

. Funkcja ta jest zawarta w skrypcie 

ajax.js

.

Obsługą żądania HTTP zajmuje się skrypt 

server.php

. Skrypt ten musi otrzymać identyfikator wybranej

opcji menu. Identyfikator jest dołączany do adresu URL po znaku zapytania, np. adres 

server.php?

id=7

 będzie zwracał szczegółowe dane płyty o identyfikatorze 7. Na podstawie identyfikatora zawartego

w tablicy 

$_GET['id']

, skrypt 

server.php

 wysyła odpowiedź: kod HTML ze szczegółowymi danymi

wybranej płyty.

Odpowiedź HTTP jest odbierana przez funkcję 

odbierzDane()

 zawartą w skrypcie 

ajax.js

. Funkcja

ta przepisuje odebrany kod HTML do odpowiedniego elementu HTML zawartego w kodzie strony.

Oto, w jaki sposób przebiega dynamiczna wymiana treści dokumentu, bez przeładowania strony WWW:

1.  Akcja rozpoczyna się od wskazania opcji menu kursorem myszy.

2.  Zostaje uruchomiona funkcja obsługi zdarzenia 

onmouseover

. Jej parametrem jest numer

wskazanej opcji menu.

3.  Funkcja 

pobierzDane()

 rozpoczyna transakcję HTTP i ustala funkcję odpowiedzialną za odbiór

danych.

4.  Zapytanie HTTP jest wysyłane do skryptu 

server.php

. Do zapytania dołączamy identyfikator

wybranej opcji menu.

5.  Skrypt 

server.php

 na podstawie identyfikatora 

$_GET['id']

 dołączonego w adresie URL

wysyła kod HTML ze szczegółowymi danymi wybranej płyty.

6.  Funkcja 

odbierzDane()

 przepisuje dane zwrócone przez skrypt 

server.php

 do elementu 

div

o identyfikatorze 

content

.

Pliki tekstowe są odczytywane w dwóch miejscach:

najpierw w skrypcie 

index.php

, który drukuje menu,

następnie w skrypcie 

server.php

 w celu ustalenia szczegółowych danych wybranej płyty.

1.2 Rozwiązanie

Skrypt 

index.php

 kroi plik 

00lista.log

 i na jego podstawie drukuje menu:

<ol id="menu">
<?php
$p = file('00lista.log');

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

5/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

$ile = count($p);

for ($i = 1; $i <= $ile; $i++) {
  $e = explode("\t", trim($p[$i - 1]));
  echo "
    <li
      onmouseover=\"podajDane('{$i}');\" 
      onmouseout=\"wyczyscDane();\" 
    >
      {$e[0]}: {$e[1]}
    </li>
  ";
}
?>
</ol>

Każda z opcji menu ma zdefiniowaną obsługę zdarzeń 

onmouseover

 oraz 

onmouseout

. Parametrem

zdarzenia 

onmouseover

 jest identyfikator wybranej płyty. Na przykład płyta Fly on the Wall ma numer

10, zatem opcja menu ma postać:

<li
  onmouseover="podajDane('10');" 
  onmouseout="wyczyscDane();">
AC/DC: Fly on the Wall</li>

Funkcja 

podajDane()

 zdefiniowana w pliku 

ajax.js

 odpowiada za utworzenie obiektu

XMLHttpRequest

, zainicjalizowanie żądania HTTP oraz ustalenie funkcji wywoływanej, gdy nadejdzie

odpowiedź HTTP:

function podajDane(id)
{
  if (r = getXMLHttpRequest()) {
    r.open('GET', 'server.php?id=' + id, true);
    r.onreadystatechange = odbierzDane;
    r.send(null);    
  }
}

Funkcja 

odbierzDane()

 sprawdza, czy transakcja HTTP została pomyślnie wykonana i jeśli tak

przepisuje odebrane dane do elementu HTML o identyfikatorze 

content

:

function odbierzDane()
{
  if (r.readyState == 4 && r.status == 200) {
    document.getElementById('content').innerHTML = r.responseText;
  }
}

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

6/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Element 

div#content

 znajduje się w skrypcie 

index.php

 poniżej menu. Początkowo jest on pusty:

<div id="content"></div>

Ostatni ze skryptów, 

server.php

, odpowiada za wysyłanie danych konkretnej płyty. Skrypt ten należy

wywołać z parametrem 

id

 zawierającym identyfikator płyty. Na przykład adres:

server.php?id=10

będzie powodował wyświetlenie szczegółowych danych płyty Fly on the Wall. W skrypcie tym najpierw

sprawdzamy obecność i poprawność zmiennej 

$_GET['id']

, a następnie odczytujemy odpowiedni plik

tekstowy, odczytane informacje formatujemy w postaci tabeli HTML i instrukcją 

echo

 wysyłamy do

przeglądarki.

2. Przykład drugi: rozwijanie i zwijanie

Drugi przykład prezentuje działanie kontrolek, które mogą zostać rozwinięte lub zwinięte. Na rysunkach 3

oraz 4 widoczna jest seria kontrolek zawierających ikony 

+

 oraz 

-

. Każda kontrolka zawiera dane o jednej

książce Agaty Christie.

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

7/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Rysunek 3. Drugi przykład po rozwinięciu danych książki Endless Night

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

8/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Rysunek 4. Drugi przykład po rozwinięciu danych książek Endless Night oraz Hickory Dickory Dock

Rozwiązanie składa się z czterech skryptów: 

index.php

, 

server.php

, 

xmlhttprequest.js

,

ajax.js

. Dane pochodzą z plików tekstowych. Każda książka jest opisana w jednym pliku tekstowym.

Dodatkowo plik 

00lista.log

 zawiera listę wszystkich książek.

2.1 Ajax

Ajax jest w tym przykładzie wykorzystany do pobierania szczegółowych danych książki. Dynamiczna

wymiana treści przebiega następująco:

1.  Akcja rozpoczyna się po kliknięciu ikony 

+

.

2.  Ikona 

+

 obsługuje zdarzenie 

onclick

. Funkcja obsługi nazywa się 

plus_minus()

.

3.  Parametrami funkcji 

plus_minus()

 są identyfikator klikniętej książki oraz kliknięty obiekt DOM.

Dzięki parametrowi 

this

 każda kontrolka może zostać rozwinięta oraz zwinięta niezależnie od

pozostałych.

4.  Po wystąpieniu zdarzenia, funkcja 

plus_minus()

 na podstawie parametru 

this

 zmienia wygląd

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

9/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

odpowiedniej kontrolki oraz na podstawie parametru 

id

 wysyła żądanie HTTP.

5.  Żądanie HTTP jest wysyłane do skryptu 

server.php

. W żądaniu dołączamy identyfikator

klikniętej książki.

6.  Skrypt 

server.php

 na podstawie identyfikatora 

$_GET['id']

 wysyła tabelę HTML ze

szczegółowymi danymi wybranej książki.

7.  Funkcja 

odbierzDane()

 odbiera dane od skryptu 

sever.php

. Odebrane informacje są

wstawiane do odpowiedniego elementu HTML.

Pliki tekstowe są odczytywane w dwóch miejscach:

podczas tworzenia strony z listą wszystkich książek (w skrypcie 

index.php

),

podczas przygotowywania tabeli ze szczegółowymi danymi wybranej książki (w skrypcie

server.php

).

2.2 Rozwiązanie

Najpierw na podstawie pliku 

00lista.log

 skrypt 

index.php

 drukuje serię elementów 

div

 klasy

tresc

:

<?php
$p = file('00lista.log');
$ile = count($p);
for ($i = 1; $i <= $ile; $i++) {
  $e = explode('*', trim($p[$i - 1]));
  echo "
        <div class=\"tresc\">...</div>
    ";
}
?>

Wszystkie elementy 

div class="tresc"

 mają identyczną strukturę. Każdy z nich zawiera tytuł

powieści (element 

h3

), ikonę 

+/-

 (element 

a

) oraz miejsce na opis powieści (pusty element 

div

):

<div class="tresc">
  <h3>
    <a href="#" onclick="plus_minus(this, 1);">+</a>
    4.50 from Paddington
  </h3>
  <div></div>
</div>    

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

10/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Elementy 

a

 z ikoną 

+/-

 obsługują zdarzenie 

onclick

. Po wystąpieniu zdarzenia wywoływana jest

funkcja 

plus_minus()

, której parametrami są kliknięty element 

a

 (obiekt 

this

 modelu DOM) oraz

numer identyfikujący powieść.

Funkcja 

plus_minus()

 odpowiada za dwie czynności: rozwinięcie/zwinięcie kontrolki oraz

uruchomienie transakcji HTTP mającej na celu pobranie danych wybranej książki. Rozwijanie i zwijanie

kontrolki sprowadza się do modyfikacji właściwości 

display

 odpowiedniego elementu DOM. Natomiast

pobranie z serwera danych wybranej książki odbywa się w identyczny sposób, jak w poprzednim

przykładzie. Po utworzeniu obiektu 

XMLHttpRequest

 ustalamy dane zapytania HTTP, do właściwości

onreadystatechange

 przypisujemy funkcję zajmującą się odbiorem danych, po czym wysyłamy

żądanie HTTP:

function plus_minus(id, nr)
{
  element = id.parentNode.parentNode.childNodes[1];
  if (element.style.display == 'block') {
    element.style.display = 'none';        
    id.innerHTML = '+';
  } else {
    element.style.display = 'block';                
    id.innerHTML = '-';                
    if (r = getXMLHttpRequest()) {
      r.open('GET', 'server.php?id=' + nr, true);
      r.onreadystatechange = odbierzDane;
      r.send(null);                
    }
  }
}   

Funkcja 

odbierzDane()

 przepisuje dane odebrane od skryptu 

server.php

 do pustej kontrolki 

div

przeznaczonej na opis powieści.

Skrypt 

server.php

 należy wywołać podając identyfikator powieści, np.:

server.php?id=13

Wynikiem działania skryptu jest tabela HTML zawierająca szczegółowe dane wybranej książki.

3. Przykład trzeci: okno popup

Kolejny przykład prezentuje wyskakujące okienka (tzw. popup). Tabela widoczna na rysunkach 5 oraz 6

zawiera dane meczów piłkarskich. Po wskazaniu wybranego meczu, obok kursora myszy wyskakuje

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

11/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

okienko popup zawierające szczegółowe dane meczu.

Rysunek 5. Trzeci przykład po wskazaniu meczu Dospel Katowice - Groclin Dyskobolia

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

12/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Rysunek 6. Trzeci przykład po wskazaniu meczu Amica Wronki - Wisła Kraków

Tym razem wszystkie dane pochodzą z jednego pliku tekstowego 

mecze.txt

.

3.1 Ajax

W tym ćwiczeniu Ajax odpowiada za pobieranie szczegółowych danych meczu. Oto, w jaki sposób

przebiega dynamiczna wymiana treści:

1.  Akcja rozpoczyna się od wskazania kursorem myszy wybranego wiersza tabeli meczów.

2.  Każdy wiersz tabeli obsługuje zdarzenia 

onmouseover

, 

onmousemove

, 

onmouseout

.

Przesunięcie okna popup w odpowiednie miejsce ekranu wymaga parametru 

event

 (współrzędne

myszki). Wypełnienie elementu danymi wymaga identyfikatora meczu.

1.  Po wystąpieniu zdarzenia 

onmouseover

 wyświetlane jest okno popup. Okno wypełniamy

danymi pobieranymi od skryptu 

server.php

.

2.  Zdarzenie 

onmousemove

 powoduje przesunięcie okna popup.

3.  Wynikiem wystąpienia zdarzenia 

onmouseout

 jest ukrycie okna popup.

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

13/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

3.  Funkcja 

show_popup()

 obsługująca zdarzenie 

onmouseover

 wysyła żądanie HTTP dołączając

do niego identyfikator meczu. Dodatkowo w celu umieszczenia okna popup w odpowiednim

miejscu ekranu wywoływana jest funkcja 

move_popup()

.

4.  Żądanie HTTP jest wysyłane do skryptu 

server.php

, który na podstawie identyfikatora wysyła

tabelę HTML ze szczegółowymi danymi wybranego meczu.

5.  Funkcja 

odbierzDane()

 przepisuje informacje odebrane od skryptu 

server.php

 do okienka

popup.

Plik tekstowy 

mecze.txt

, podobnie jak poprzednio, jest odczytywany w dwóch miejscach:

w skrypcie 

index.php

 służy do wydrukowania tabeli meczów,

w skrypcie 

server.php

 służy do wydrukowania szczegółowych danych meczu.

3.2 Rozwiązanie

Strona WWW z tabelą meczów rozpoczyna się od elementu:

<div id="popup"></div>

który dzięki stylom:

#popup {
  display: none;
  position: absolute;
}

jest niewidoczny. Po włączeniu widoczności, element ten będzie pozycjonowany bezwzględnie, co ułatwi

umieszczenie go w odpowiednim miejscu ekranu.

Zadanie rozpoczynamy od wydrukowania tabeli HTML. Zadanie to realizuje skrypt 

index.php

, który

„kroi” plik 

mecze.txt

:

<?php
$p = file('mecze.txt');
$ile = count($p);
for ($i = 1; $i <= $ile; $i++) {
  $e = explode('*', trim($p[$i - 1]));
  echo "
    <tr 
      onmouseover=\"show_popup(event, {$i});\" 
      onmousemove=\"move_popup(event);\" 

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

14/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

      onmouseout=\"hide_popup();\">
        <td>{$i}.</td>
        <td>{$e[1]} - {$e[2]}</td>
    </tr>
  ";
}
?>

Wynikiem pracy skryptu 

index.php

 jest tabela HTML, której wiersze posiadają zdefiniowaną obsługę

zdarzeń 

onmouseover

, 

onmousemove

 oraz 

onmouseout

:

<tr
  onmouseover="show_popup(event, 1);" 
  onmousemove="move_popup(event);" 
  onmouseout="hide_popup();">
    <td>1.</td>
    <td>Widzew Łódź - Świt Nowy Dwór Mazowiecki</td>
</tr>

Funkcja 

show_popup()

 odpowiada za wyświetlenie okna popup. Jej parametrami są zdarzenie 

event

,

które zawiera współrzędne myszki oraz identyfikator wskazanego meczu. Głównym zadaniem funkcji

show_popup()

 jest pobranie danych wybranego meczu. Odbywa się to identycznie jak w poprzednich

przykładach, przy użyciu obiektu 

XMLHttpRequest

 oraz metody 

odbierzDane()

, która przepisze

dane pobrane z serwera do okna popup. Po zainicjalizowaniu transakcji HTTP wywołujemy funkcję

move_opoup()

. Spowoduje ona wyświetlenie okna popup w odpowiednim miejscu ekranu:

function show_popup(event, id)
{
  if (!event) {
    var event = window.event;
  }
  if (r = getXMLHttpRequest()) {
    r.open('GET', 'server.php?id=' + id, true);
    r.onreadystatechange = odbierzDane;
    r.send(null);    
    move_popup(event)    
  }
}

Funkcja move_popup()

 włącza widoczność okna popup oraz przesuwa je do odpowiedniego

położenia. Nowa pozycja okna popup jest ustalana na podstawie współrzędnych kursora myszki,

zawartych w parametrze 

event

 oraz informacjach o przewijaniu dokumentu pochodzących z obiektu

document

:

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

15/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

function move_popup(event)
{
  if (!event) {
    var event = window.event;
  }
  el = document.getElementById('popup');
  el.style.display = 'block';
  el.style.left = 
    document.documentElement.scrollLeft + 
    event.clientX + 10 +  'px';
  el.style.top = 
    document.documentElement.scrollTop + 
    event.clientY  + 10 + 'px';
}

Skrypt 

server.php

 pobiera identyfikator wybranego meczu, zaś funkcja 

odbierzDane()

 działa

identycznie jak w poprzednich przykładach. Jej zadanie sprowadza się do przepisania danych odebranych

od skryptu 

server.php

 do odpowiedniej kontrolki HTML.

Ukrycie okna popup polega na zmianie właściwości 

display

:

function hide_popup()
{
    e = document.getElementById('popup');
    e.style.display = 'none';
}

4. Przykład czwarty: zakładki

W przykładzie tym występują zakładki reagujące na kliknięcie. Rysunki 7 oraz 8 przedstawiają tę samą

stronę WWW po wybraniu dwóch różnych zakładek. Wygląd zakładek jest oczywiście określany przy

użyciu stylów CSS. Kodem HTML zakładek jest zwykła lista 

ol

 lub 

ul

.

Rysunek 7. Czwarty przykład po wybraniu zakładki medycyna z roku 1924

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

16/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

Rysunek 8. Czwarty przykład po wybraniu zakładki literatura z roku 1924

Dane dostępne na stronie pochodzą z jednego pliku 

nagrodynobla.txt

.

4.1 Ajax

Od strony implementacyjnej zakładki są zwykłym menu, które reaguje na kliknięcie. Jest to więc przykład

niemal identyczny jak przykład pierwszy. Różnica polega na tym, że tym razem reagujemy na kliknięcie

(obsługa zdarzenia 

onclick

), a nie na wskazanie (zdarzenie 

onmouseover

). Ponadto dane pochodzą z

jednego pliku, a skrypt 

server.php

 pobiera dwa parametry: identyfikator roku oraz identyfikator

kolumny.

Przeładowanie fragmentu treści strony przebiega w następujących krokach:

1.  Zakładkami są odpowiednio sformatowane elementy listy numerowanej 

ol/li/a

.

2.  Elementy listy obsługują zdarzenie 

onclick

. Po wystąpieniu zdarzenia wywoływana jest funkcja

pokaz_dane()

.

3.  Funkcja 

pokaz_dane()

 pobiera dwa parametry: identyfikator roku oraz numer kolumny (1 -

fizyka, 2 - chemia, itd.).

4.  Funkcja 

pokaz_dane()

 tworzy obiekt 

XMLHttpRequest

 i wysyła do skryptu 

server.php

żądanie HTTP.

5.  Do żądania dołączane są dwie dane: identyfikator roku oraz numer kolumny.

6.  Skrypt 

server.php

 na podstawie odebranych parametrów wysyła nazwiska wybranych

laureatów.

7.  Funkcja 

odbierzDane()

 przepisuje wyniki odebrane od skryptu 

server.php

 do odpowiedniej

kontrolki HTML.

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

17/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

4.2 Rozwiązanie

Skrypt 

index.php

 rozpoczynamy od wydrukowania menu zawierającego roczniki. Menu generowane na

bazie pliku 

nagrodynobla.txt

:

<ul id="menu">
<?php
$plik = file('nagrodynobla.txt');
$plik_count = count($plik);
for ($i = 1; $i <= $plik_count; $i++) {
    echo '<li>';
    $linia = explode('|', trim($plik[$i - 1])); 
    echo '<a href="index.php?id=';
    echo $i;
    echo '">' . $linia[0] . '</a>';
    echo '</li>' . "\n";
}
?>
</ul>

Następnie w zmiennej 

$nr

 ustalamy bieżąco wybrany rocznik:

$nr = 1;
if (
    isset($_GET['id']) && 
    str_ievpifr($_GET['id'], 1, $plik_count)
) {
    $nr = $_GET['id'];
}

Po czym drukujemy zakładki pamiętając o dwóch parametrach funkcji 

pokaz_dane()

: identyfikatorze

rocznika (zmienna 

$nr

) oraz identyfikatorze kolumny:

$wynik = "
  <ol>
    <li><a href=\"#\" 
      onclick=\"pokaz_dane({$nr}, 1);\">fizyka</a></li>
    <li><a href=\"#\" 
      onclick=\"pokaz_dane({$nr}, 2);\">chemia</a></li>
    ...
  </ol>    
";  

Wydrukowane zakładki przyjmą postać:

<ol>
  <li><a href="#" onclick="pokaz_dane(14, 1);">fizyka</a></li>
  <li><a href="#" onclick="pokaz_dane(14, 2);">chemia</a></li>

30.08.2012

Ajax. Kurs od podstaw. Część 3: Ajax, PHP i pliki tekstowe

18/18

gajdaw.pl/ajax/ajax-php-pliki-tekstowe/print.html

  ...
</ol>   

Funkcje 

pokaz_dane()

 oraz 

odbierzDane()

 są niemal identyczne jak w pierwszym przykładzie.

Różnica wynika stąd, że do skryptu 

server.php

 należy przekazać dwa parametry. Stosowane zmienne

URL nazywają się 

rocznik

 oraz 

kolumna

:

server.php?rocznik=13&kolumna=2

lp.

Przykład

1.

Przykład pierwszy: menu rollover

2.

Przykład drugi: rozwijanie/zwijanie kontrolek

3.

Przykład trzeci: okno popup

4.

Przykład czwarty: zakładki

Tabela 1. Przykłady do pobrania

Reklama