jQuery: Examples 3 – Ajax

Několik příkladů pro použití technologie Ajax pomocí knihovny jQuery.

JavaScriptová knihovna jQuery disponuje množstvím funkcí, podporujících technologii Ajax, a jako obvykle nám práci s JavaScriptem velmi usnadňuje.

Load

První a nejjednodušší funkce, se kterou se v knihovně jQuery můžete setkat, je funkce Load. Jak už název funkce napovídá, funkce načítá data. Načítat data můžete do libovolného elementu ve stránce, pouhým voláním funkce nad elementem s příslušnými parametry.

Load obsahuje maximálně tři parametry, z nichž nejdůležitější je právě ten první, který určuje adresu, která bude pro load použita.

Druhý parametr je nepovinný a může obsahovat data, která budou spolu s požadavkem poslána na server. Poslední parametr je jako obvykle callback funkce.

Spolu s funkcí Load zmíním ještě funkce, které mohou být užitečné pro určité debugování Ajaxu v jQuery, a to jsou funkce pro jednotlivé události:

ajaxComplete – provede se po dokončení požadavku
ajaxError – provede se v případě nesplění požadavku
ajaxSend – provede se při odeslání požadavku
ajaxStart – provede se při startu požadavku (není stejný jako ajaxSend)
ajaxStop – provede se po dokončení všech požadavků
ajaxSuccess – provede se při úspěšném dokončení požadavků

Všechny tyto funkce obsahují jediný parametr a to callback funkci, která může například vypisovat stav provádění.

V příkladu si vytvoříme několik odkazů, na které po kliknutí nepřejdeme, ale pomocí knihovny jQuery je budeme načítat do elementu na stránce. Div s odkazy bude mít ID ajax_urls, abychom mohli jednoduše odlišit událost kliknutí pouze na tyto odkazy. Zjištěním jejich hodnoty atributu href můžeme provést načtením:

$("div#urls").load($(this).attr("href"));

1	$("div#urls").load($(this).attr("href"));

Celý JavaScriptový handler může vypadat například takto:

$("div#ajax_urls a").click(function (){
        //load url   
        $("div#urls").load($(this).attr("href"));
        //return false - link is not clickable
        //set title value
        $("div#title").html( $(this).attr("title") );
        //simple animation :-)
        $("div#title").animate({ letterSpacing : 5 }).animate({ letterSpacing : 0 });
        //strike link
        $(this).css("text-decoration", "line-through");
        //return false
        return false;
});

$("div#ajax_urls a").click(function (){

//load url

$("div#urls").load($(this).attr("href"));

//return false - link is not clickable

//set title value

$("div#title").html( $(this).attr("title") );

//simple animation :-)

$("div#title").animate({ letterSpacing : 5 }).animate({ letterSpacing : 0 });

//strike link

$(this).css("text-decoration", "line-through");

//return false

return false;

});

Příklad můžeme doplnit o výpis stavu požadavku pomocí zmíněných funkcí:

    //ajax start event
    $("#msg").ajaxStart(function(){
        $(this).append("<li>Starting request</li>");
     });
…

//ajax start event

$("#msg").ajaxStart(function(){

$(this).append("<li>Starting request</li>");

});

…

Celý příklad může vypadat následně:

jQuery.get, jQuery.post

Na jednoduché načítání si sice vystačíte s funkcí Load, ale na pokročilejší požadavky vám určitě stačit nebude. Funkce sice umožňuje jednoduché odesílání dat, kromě samotného načtení, ale pro snadnější prácí nabízí jQuery rozšíření v podobě dvojice funkcí, které slouží primárně pro odesílání hodnot, a to metodou GET nebo POST, jak jejich názvy vypovídají. Obě funkce a jejich ovládání jsou identické, liší se pouze v použité metodě při odesílání.

Použití bude zřejmé na příkladu. Vytvoříme si jednoduchý formulář, který se bude pomocí Ajaxu a metody Get odesílat.

Vytvoříme si jednoduchý formulář s jedním inputem, který bude sloužit pro zadání čísla. Toto číslo se odešle na server, který jej následně zpracuje (v našem případě zformátuje pomocí number_format) a vrátí zpět.

JavaScriptová část bude velmi jednoduchá. Musíme načíst hodnotu z inputu po odeslání formuláře a tuto hodnotu pomocí Ajaxu odešleme na server (pomocí metody GET). Výsledek, který server vrátí zpracujeme pomocí callback funkce:

$("form").submit( function(){
    //value from input
    var number = $("input[name='number']").val(); 
    
    //send form
    $.get("format.php", {number: number}, function ( data ){
        //callback function
        $("div#numbers").append(number + " : " + data + '<br />');
    }, ‘html’);
    //stop
    return false;
});

$("form").submit( function(){

//value from input

var number = $("input[name='number']").val();

//send form

$.get("format.php", {number: number}, function ( data ){

//callback function

$("div#numbers").append(number + " : " + data + '<br />');

}, ‘html’);

//stop

return false;

});

Div „numbers“ obsahuje výsledné hodnoty zformátovaného čísla.

Serverová část pouze zpracuje vstupní hodnotu z pole GET:

if( (int)$_GET['number'] == 0 )
{
    die('Please enter number (!= 0)');    
}
die( number_format( (int)$_GET['number'], 2, ', ', ' ') );

if( (int)$_GET['number'] == 0 )

{

die('Please enter number (!= 0)');

}

die( number_format( (int)$_GET['number'], 2, ', ', ' ') );

Důležité je zde použití funkce $.get, která obsahuje čtyři parametry:

volaný soubor pro zpracování parametrů
odesílaná data se správnou strukturou (name: value)
callback funkce
udává typ dat: xml, html, …, které jsou vráceny callback funkcí. Parametr je nepovinný

Celý příklad si můžete zobrazit zde:

jQuery.ajax

Pokud si nevystačíte ani s funkcemi get a post, můžete využít této globální funkce, která je základem pro celé zpracování Ajaxu v jQuery a nabízí velké možnosti nastavení.

Funkce má jeden jediný parametr – options, který umožňuje zadávat nastavení pro zpracování metodou klíč: hodnota.

Opět vysvětlím na jednoduchém příkladu:

$('a').click(function(){
    $.ajax({
      type: "GET",
      url: "test.php",
    });    
    return false;
});

$('a').click(function(){

$.ajax({

type: "GET",

url: "test.php",

});

return false;

});

V tomto případě je vytvořena událost pro kliknutí na odkazy. V případě že bude na odkaz kliknuto, skript odešle požadavek na soubor test.php, což je nastaveno klíčem url, metodou get – klíč type.

Klíčů, kterými můžete nastavení Ajaxu ovlivnit je velké množství, uvedu alespoň ty nejdůležitější:

Klíč	Hodnota
url:	Url adresa požadavku.
type:	typ odesílaných dat (GET, POST). Hodnota ‚GET je výchozí.
success:	funkce volaná po vykonání požadavku. Funkce může obsahovat dva parametry: data vrácená požadavkem status vykonání ajaxu
dataType:	typ dat, vrácených serverem (xml, html, json, …)
data:	data odsílaná na server, podobně jako u funkce post a get.
beforeSend:	možnost definování funkce před odesláním
cache:	možnost nastavení cache – true/false

Klíče a možné hodnoty v $.ajax

Můžeme si opět vytvořit jednoduchý příklad, kde si funkčnost ukážeme.

Ukázkový příklad bude obsahovat jeden select, ve kterém budeme mít možnost vybrat si z několika hodnot, po vybrání možnosti kliknutím na odkaz možnost zvolíme a odešleme požadavek na server. Jako hodnota $_GET[‘name’] budeme chtít, aby serveru byla odeslána hodnota z našeho selectu.

V poslední fázi vypíšeme vrácená data:

$('a').click(function(){
    var OptionValue = $("select[name='themes']").val();
    
    $.ajax({
      type: "GET",
      url: "goImage.php",
      cache: false, 
      data: "name=" + OptionValue,
      dataType: "html", 
      beforeSend: function(){
        alert("Loading image");                  
      }, 
      success: function(data){
        $("#ImageTheme").html(data);
      }
    });    
    return false;
});

$('a').click(function(){

var OptionValue = $("select[name='themes']").val();

$.ajax({

type: "GET",

url: "goImage.php",

cache: false,

data: "name=" + OptionValue,

dataType: "html",

beforeSend: function(){

alert("Loading image");

success: function(data){

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

}

});

return false;

});

Nejprve jsme si zjistili hodnotu ze selectu, který má name themes. Následně odešleme náš požadavek.

V nastavení si nastavíme metodu GET (nemusíme nastatovat, je výchozí), url adresu pro odeslání požadavku, odesílaná data a typ navrácených dat.

Jako rozšíření jsme vytvořili funkci pro událost beforeSend, která se volá před samotným odesláním požadavku a nakonec funkci pro success, která se volá po dokončení požadavku.

Na serveru dle hodnoty v selectu (1-4) vrátíme obrázek dle této hodnoty:

switch( (int)$_GET['name'] )
{
    case 1: die('<img src="theme1.jpg" alt="theme 1"/>');
    case 2: die('<img src="theme2.jpg" alt="theme 2"/>');
    case 3: die('<img src="theme3.jpg" alt="theme 3"/>');
    case 4: die('<img src="theme4.jpg" alt="theme 4"/>');
    default: die('Select optoin');
}

switch( (int)$_GET['name'] )

{

case 1: die('<img src="theme1.jpg" alt="theme 1"/>');

case 2: die('<img src="theme2.jpg" alt="theme 2"/>');

case 3: die('<img src="theme3.jpg" alt="theme 3"/>');

case 4: die('<img src="theme4.jpg" alt="theme 4"/>');

default: die('Select optoin');

}

Celý příklad si můžete zobrazit zde

Závěrem

jQuery nabízí pro využití technologie Ajax mnohem více. Tří příklady uvedené v tomto článku jsou pouze základní použití, detailnější informace zmíním příště.

Comments are closed for this page

kolouc

31/03/2009

A jak odeslu neco pres POST? vsechny priklady jsou pomoci GET

nouma

31/03/2009

Uplne stejne jako pres GET, nauc se cist.

Ivo

31/03/2009

Po tom $.ajax({
…
})

je voláno

return false;

Kvůli čemu to je?

finch

31/03/2009

Prosím tě, můžeš mi dát malou ukázku kódu, kdy se po výběru option v selectu předá nějaká hodnota option do php skriptu který je v jiném souboru? Bez použití buttonu. Trápím se s tím už dva/tři dny a pořád na to nemůžu přijít, jediné na co jsem přišel, že se mi vypíše ihned po výběru option její value do té samé stránky

Děkuji

Ivo

04/10/2013

Ivo protože si píča, a nemáš se na co ptát. Demente skurvený!