Ajax med jQuery och PHP

Mattias — Wed, 06 Oct 2010 10:57:50 +0000

Ajax har blivit enkelt med jQuery och PHP. Tja, det mesta har blivit enkelt med jQuery, plötsligt är man Javascriptexpert ;) Ett exempel bara för att visa…

Vi börjar med ett inkludera jQuery, för att slippa ladda hem filen laddar vi från Google. Skapa ett HTML-dokument och klipp in den här raden i HTML-dokumentes head:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>

Skapa ett javscript block. Där kallar vi på jQuery med $(document).ready :

<script type="text/javascript">
    // jQuery listening event
    $(document).ready(function(){
    });
script>

Vi behöver något HTML-element att arbeta med, så jag skapar en div i HTML-dokumentets -tagg:

<div id="getmytime"></div>

Tillbaka till javascript-blocket. jQuery har en funktion som heter $.get. Den gör samma sak som om vi kallar på ett script och skickar data i adressraden som querystring (eller skickar formulär med method=”get”). $.get anropar ett PHP-script vi snart ska göra, och returnerar data.

Så här ser mitt anrop med $.get ut

		// Call the PHP file to  get value into the div on load
		// I also send the variable format with the call (would be similar to sending the url mytime.php?format=(Y-m-d) H:i:s)
		$.get('mytime.php', { format: '(Y-m-d) H:i:s' }, function(data) {
			$("#getmytime").html(data);
		});

Ser det rörigt ut? Det är javascript function med 3 argument:

Adressen till vårt PHP-script (‘mytime.php’)
Variabler vi vill skicka med, jag skickar med variabeln ”format”. Den här kan du ta bort om du vill. { format: '(Y-m-d) H:i:s' }. ‘(Y-m-d) H:i:s’ skulle kunna varit vad som helst för värde, nu råkar det vara datumformatet jag vill använda.
Det tredje argumentet är en function som avgör vad som ska hända med datan som returneras från skriptet. function(data) {}.

När data skickas tillbaka vill jag ladda det till div-taggen i HTML-dokumentet. Jag använder jQuery functionen .html() för att lägga in data i en div.

$("#getmytime").html(data);

Dags att skapa mytime.php – vi måste ju förstås ha PHP-filen som returnerar någon data. Jag gör den väldigt kort, den skriver ut värdet från PHP-funktionen date(), om ett värde skickats in i $_GET['format'] använder jag det för att sätta formatet på mitt datum. Så här (det här är hela PHP-filen mytime.php):


if (isset($_GET['format'])) {
	echo date($_GET['format']);
} else {
	echo date('Y-m-d H:i:s');	
}
?>

Nu laddas rätt datum till HTML-filen när du öppnar sidan i webbläsaren. Men vi vill att det ska uppdateras när du klickar utan att sidan uppdateras. Det är ju trots allt det som är den stora grejen med Ajax, att ladda dynamisk data utan att ladda om hel sidan. Vi lägger till en av jQuery event-handlers (”händelse-hanterare”), .click(). Inom den kör jag samma .get som när sidan laddas:

	// If you click the div#getmytime, the time updates
	$("#getmytime").click(function() {
		// Call the php file. Just to show things change I alter the format argument
		$.get('mytime.php', { format: 'j F H:i:s' }, function(data) {
			$("#getmytime").html(data);
		});
	})

Koden ovan lyssnar alltså på klick i vår div-tagg med id getmytime, och hämtar in PHP-skriptet när något klickar. Bara för visa att något ändras har jag angivet ett annat format på datumet. Jag antar, och hoppas, du kan komma på många mer spännande saker med det här än att visa tiden ;)

Här kan du ladda hem scriptet som ZIP-fil. Det består av filerna

index.html
mytime.php
style.css

Mer kan du lära dig genom att gå vår PHP-kurs, anmäl dig här!

Söndagstips för dig som börjar med PHP: 5 länkar

Mattias — Sun, 10 May 2009 10:36:11 +0000

Lite läsning och tips för helgen eller en regnig dag. Några här är samlingar till andra tutorials. Kodsnuttar är något du kan samla i många textredigerare och program som Dremweaver, Smultron, Eclipse etc. Pefekt för åternanvändning att skapat sig ett bibliotek.

Läs även andra bloggares åsikter om länkar, tutorials, php, webbutveckling, databas

PHP-kurs » AJAX

Ajax med jQuery och PHP

Söndagstips för dig som börjar med PHP: 5 länkar