Wstawianie zawartości pliku .php do diva bez przeładowywania strony

Dla specjalistów Webmastering
#1

Mam prostą grę przeglądarkową. Na razie podstrony działają tak że za pomocą php w elemencie dołączam funkcją require_once() odpowiedni plik zależnie od wartości zmiennej GET. Chcę zmienić to tak żeby działo się to bez przeładowania strony. Wykombinowałem coś takiego z użyciem Ajaxa:

$("#test").click(function() {
	$.ajax({
		url: "test.php",
		success: function(html) {
			$("#panel-body").html(html);
		}
	});
});

Problem jest w tym że w game.php (plik w którym jest ten div do którego dołączam pliki podstron) mam zmienną (tablicę z danymi z bazy) oraz dołączony plik z wszystkimi potrzebnymi funkcjami php i gdy teraz za pomocą ajaxa dołączę podstronę to z dołączonego pliku nie mam dostępu ani do zmiennej ani do funkcji php. Wcześniej z podstronami w php było ok. Jak najprościej zrobić żeby w dołączonym pliku można było używać zmiennych i funkcji które znajdują się w index.php lub plikach dołączonych do niego? Może być też jakiś inny sposób zmiany podstron bez przeładowania byle żeby tak działał.

#2

Jeszcze raz od początku.

Masz index.php który ładuje odpowiednie pliki z kodem php w zależności od wartości przesłanej GET’em. I zawsze odwołujesz się do index.php, a nie do innych plików, np:

  • index.php

  • index.php?action=start

-index.php?action=new-game

Coś takiego tak?

#3

Tak, np. game.php?a=mapa, game.php?a=zamek itp.

I teraz w game.php mam np. tablice $user z danymi o graczu, przy rozwiązaniu z GET w dołączonym pliku mam dostęp do danych z tablicy natomiast w rozwiązaniu z Ajaxem które podałem w pierwszym poście nie ma tych danych. Z funkcjami napisanymi w php jest tak samo podstrona dołączona Ajaxem nie znajduje funkcji.

#4

Twój test php ma zwracać to co chcesz wyświetlić w tym divie.

Najprościej zrobić rozróżnienie między wywołaniem js i bez niego (w tym celu wysyłasz jakąś zmienną w przypadku ajax’a). No i wtedy sobie wyświetlasz np daną tabelę bez reszty strony.

#5

Zrozumiałem tylko pierwsze zdanie. xD Mógłbyś mi jakoś bardziej wytłumaczyć co mam zrobić a najlepiej podać jakiś przykład?

#6

Twój php wyświetla coś w stylu:

if(!$_GET['ajax']){
//tutaj wyświetlasz główną treść nad tym co chcesz odświeżać
}
//tutaj wyświetlasz treść którą chcesz odświeżać
//a tutaj możesz dać if z jakąś inną treścią, lecz nie musisz tego robić

No i teraz w jquery dajesz wywołanie (get to skrót od tej funkcji ajax z argumentem):

$.get( "test.php?ajax=1", function( data ) { $( "#odświeżany_div" ).html( data );});

No i to ci wyświetli tylko to co masz poza tym warunkiem.

Ew możesz zrobić osobny plik dot. wywołania (tyle, że musisz załączyć wszystkie pliki potrzebne do obsługi danego zapytania, rozróżniać podstrony możesz również takim warunkiem j/w)

#7

  1. Poczytaj o tym jak działa ajax

  2. Jak nauczysz się jak działa ajax poczytaj o REST i Single Page Application

  3. Łopatologicznie użyj ajaxa, czyli:

pobieraj stronę dokładnie tak samo (te same url) jak to robisz bez niego i podmieniaj zawartość strony.

Parametry GET możesz dołączyć do zapytania ajaxowego, zwłaszcza w jQuerym robi się to banalnie prosto (odsyłam do dokumentacji). Potraktuj ajaxa tak jakbyś wczytywał całą stronę. Na początek to wystarczy. Jak zrozumiesz jak działa ajax i poczytasz o nim to możesz kombinować więcej.

Rozwiązanie łopatologiczne, jest bardzo nieeleganckie i w pewnym sensie błędne, ale będzie Ci działać. Na początek możesz tak zrobić, ale nie powinno się tak robić bo będziesz miał jakby kolejną sekcję head i body (html też).