Help! - Ajax – JavaScript, AJAX, jQuery – Fórum

Fórum › JavaScript, AJAX, jQuery

Help! - Ajax

~ Anonymní uživatel
~ 4 příspěvky

23. 8. 2008 #1

Zdarvím do fóra.

Mám html formular s radio buttony a jedním inputem pro zadani castky. Ty radio buttony urcuji jakym cislem se bude castka nasobit a zároven pak delit.

Po odeslani se to cele posle do script.php a tam se to spocita a vrati to echo.
Zde je pro lepsi pochopeni obrazek:) http://img246.imageshack.us/my.php?image=97916126aq7.jpg

Cele to funguje perfektne, jenze problem je v tom ze pri kazdem spocitani se musi znovu nacitat obsah stranky.
Na netu sem zjistil ze tohle jde vyresit AJAXEM.

Uz jsem to zkousel podle "example" na netu predelat na "ajax system" ale jeste se mi to nepodarilo.

Potrebuju Ajax Script ktery byl schopny odeslat vsechny ty data metodou POST do toho "script.php" a zaroven vracel z toho scriptu echo ve formatu: $_POST['castka'].

Díky moc

Nahlásit jako SPAM

IP: 85.207.125.–

bukaj0

Věrný člen

23. 8. 2008 #2

Jenda_CZ
Hned tady na programujte je seriál týkající se AJAXu[1]. Ten jsi si jistě také přečetl, že? ;o)

[1] http://programujte.com/index.php?rubrika=296-webdesign&sekce=362-ajax&kategorie=363-kurz-ajax

Nahlásit jako SPAM

IP: 85.70.13.–

Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.

Jenda_CZ

~ Anonymní uživatel
~ 4 příspěvky

23. 8. 2008 #3

tak článek sem si přečetl, ale co je mi platný když třeba nevím co mám doplnit místo "//akce, co má funkce provést"?

1. function volanaFunkce(){
2. if(xhr.readyState == 4){ //funkci provedeme, pokud je požadavek ve stavu dokončeno
3. if(xhr.status == 200){ //pokračuji, jen když je vše OK
4. //akce, co má funkce provést
5. }else{
6. alert("Vámi definovaný prostředek nelze nalézt!");
7. }
8. }
9. }

Nahlásit jako SPAM

IP: 85.207.125.–

bukaj0

Věrný člen

23. 8. 2008 #4

Jenda_CZ
ale co je mi platný když třeba nevím co mám doplnit místo "//akce, co má funkce provést"?
Trochu přemýšlej. Neboj, i když hodně lidí tvrdí, že ano, tak to nebolí ;o) Řekni si: „Co chci udělat?“ — „Pokud se změní obsah políčka pro kraj a je tam platný kraj, chci načíst do jiného políčka všechna města v tom kraji.“

Takže realizace může být následující:
1, Sleduješ událost onchange prvku, který obsahuje kraj. Pokud se kraj změní, zavolá se fce, kterou nadefinuješ, aby tu událost sledovala.

2, V té fce zjistíš, jestli je ve formulářovém poli platný kraj (takže třebas ověření, aby tam nebyla hodnota "Vyberte kraj") a je-li, zavoláš AJAXový požadavek na skript, řekněme, PHP skript.

3, V POST datech předáš skriptu proměnnou kraj. Ten ji využije a vybere z databáze všechny města, u nichž je takovýto kraj, a ty města potom vypíše (nejlépe v nějakém dobře zpracovatelném formátu jako je JSON, nebo XML).

4, Teď se „výpočet“ vrací zpět ke klientovi a tady se právě uplatní ta fce, kde je „//akce, co má funkce provést“. Znovu si řekni co potřebuješ („zpracovat a zobrazit data“). Takže data načteš (což je závislé na použitém formátu) a jelikož potřebuješ je všechny dát jako položky nějakého formulářového výběru, odstraníš všechny položky, co tam byly teď a postupně tam nastrkáš ty nové.

Jak jednoduché. Jenom stačí trochu přemýšlet ;o)

Nahlásit jako SPAM

IP: 85.70.13.–

Jak se správně ptát? -> http://www.hash.cz/inferno/otazky.html[br][br] Po programování je člověk hladovej.

Jenda_CZ

~ Anonymní uživatel
~ 4 příspěvky

23. 8. 2008 #5

Takto by to mělo fungovat ne?

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ajax</title>



<script src="ajax.js" type="text/javascript"></script>



</head>

<body>



<form name="ajax" method="post" action="">

<input value="POST" onclick="volanaFunkce()" type="button">

</form>



<div id="myspan">

zobrazí se echo?

</div>	





</body>

</html>

ajax.js

function vytvorXHR(){

    var xhr;

    try{

      xhr = new XMLHttpRequest();

    }catch(e){//pro ppad star verze prohlee

      var MSXmlVerze = new Array('MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.5.0','MSXML2.XMLHttp.4.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp.2.0','Microsoft.XMLHttp');

      for(var i = 0; i <= MSXmlVerze.length; i ++){

        try{

          xhr = new ActiveXObject(MSXmlVerze[i]);

         //alert(MSXmlVerze[i]);

          break;

        }catch(e){

          //vzniklou chybu ignoruji a pokrauji nastavenm dal verze

        }

      }

    }

    if(!xhr)

      alert("Dolo k chyb pi vytven objektu XMLHttpRequest!");

    else

      return xhr;

  }



  // pozdavek



   var xhr = vytvorXHR();

   function vytvor pozadavek(){

   var url = "phpscript.php";

   

   xhr.open("POST",url);

   xhr.onreadystatechange = volanaFunkce; //dojde-li ke zmn, volej funkci volanaFunkce

   xhr.send(null);

}



   function volanaFunkce(){

   if(xhr.readyState == 4){ //funkci provedeme, pokud je poadavek ve stavu dokoneno

      if(xhr.status == 200){ //pokrauji, jen kdy je ve OK

      result = http_request.responseText;

         document.getElementById('myspan').innerHTML = result; 

      }else{

         alert("Vmi definovan prostedek nelze nalzt!");

      }

   }

}