Home / Tutoriale

Ajax Hello World cu Jquery

jQuery este o librarie JavaScript care simplifica scrierea de cod Javascript si Ajax. Spre deosebire de celelalte librarii, jQuery are o filozofie unica  care iti permite sa exprimi cod complex intr-un mod cat mai succint.

index.html :

Am inclus in head 3 scripturi js. Primul este reprezentat de libraria jQuery, in cel de-al doilea este definita functia de calcul si in cel de-al treilea este codul pentru preloader. Avem un div care initial nu este vizibil si in care se afla un gif animat sub forma unui preloader. Gasiti preloader-e sau puteti sa le generati la adresa AjaxLoad. Avem 2 input-uri avand numele si id-ul nr1, respectiv nr2. Am facut acest lucru pentru a serializa datele intr-un mod facil in functia de calcul. Avem si un buton de calcul care atunci cand este apasat va apela functia "calculeaza".

<html
<head>
    <title> Hello World Ajax cu Jquery </title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/code.js"></script>
    <script type="text/javascript" src="js/preloader.js"></script>
</head>
<body>

     <div style="display:none;" id="loading">
        <img alt="prealoder" title="Se incarca" src='images/preloader.gif'/>       
     </div> 
     Nr 1 = &nbsp;  <input type="text" name="nr1" id="nr1" maxlength="5" /> <br />
     Nr 2 = &nbsp;  <input type="text" name="nr2" id="nr2" maxlength="5" /> <br />     
   <input type="button" value="Calculeaza" onclick="javascipt:calculeaza();" />
   <div id="rezultat"></div>
</body>
</html>  
 

 prelaoder.js                       

  Acest script determina coordonatele centrului browserului si afiseaza si ascunde
  div-ul cu id-ul loading
 
//Pt centrarea preloader ului
var Page = new Object();
Page.width;
Page.height;
Page.top;
Page.getPageCenterX = function ()
{
        var fWidth;
        var fHeight;       
        //Pentru browsele IE mai vechi
        if(document.all)
        {
        fWidth  = document.body.clientWidth;
        fHeight = document.body.clientHeight;
        }
        //Pentru care suporta DOM
        else if(document.getElementById &&!document.all)
        {
         fWidth = innerWidth;
        fHeight = innerHeight;
        }
        else if(document.getElementById)
        {
        fWidth = innerWidth;
        fHeight = innerHeight;        
        }
        //Pentru Opera
        else if (is.op)
        {
        fWidth = innerWidth;
        fHeight = innerHeight;        
        }
        //Pentru browserele Netscape mai vechi
        else if (document.layers)
        {
        fWidth = window.innerWidth;
        fHeight = window.innerHeight;        
        }
    Page.width = fWidth;
    Page.height = fHeight;
    Page.top = window.document.body.scrollTop;
}
jQuery().ajaxStart(showPreloader); //cand fac un request Ajax afisez preloader-ul
jQuery().ajaxStop(hidePreloader);  //atunci cand se termina un request se ascunde preloader

function showPreloader(){   
    Page.getPageCenterX(); //determin mijlocul ferestrei browserului
    $('#loading').show();  //afisez div-ul cu id loading
    $('#loading').css('top' ,(Page.top + Page.height/2)-100); //pozitionez div-ul absolut
    $('#loading').css('left',Page.width/2-75);   
    $('#loading').css('position','absolute');   
}
function hidePreloader(){
     $('#loading').hide(); //ascundem div-ul cu id loading
}


 code.js

Fisierul js in care se realizeaza cererea ajax
 function calculeaza(){      
  var parametri = $("input[@type=text]").serialize();
  /*
    serilizeaza toate input-urile de tip text
    Exemplu parametri va fi nr1=23&nr2=45
  */   
 
  $.ajax({
   type: "POST",
   url: "php/calculeaza.php", //script-ul php care va realiza calculul
   data: parametri,  
     success: function(msg){    
      $('#rezultat').attr('innerHTML','Suma este '+msg);
      //se updateaza div ul cu id rezultat
   }   
  });
}

calculeaza.php


<?php
  sleep(3); //script-ul asteapta 3 secunde pentru a se vedea preloader-ul
  $nr1 = $_POST['nr1'];
  $nr2 = $_POST['nr2']; 
  $suma = $nr1+$nr2;
  echo $suma;
?>


Demo

Nume:valentin
Comentariu:Sunt nou, mi-as dori sa pot invata, dar nu reusesc:( mi se par asa complicate, abia am invatat php si html, ajax e mult mai greu
Nume:lkj
Comentariu:jljklkj
Nume:asdas
Comentariu:asd
Nume:cristi
Comentariu:Daca nu pricepi asta inseamna ca nici PHP nu stii :))Sorry, dar asta e adevarul.
Adauga comentariu
*nu va fi afisat pe site
 
  • Hosting in timp real pe servere Linux si Windows
  • US 400

    Trafic / luna : 10 GB
    Conturi E-mail : 1000
    Subdomenii : 40
    Baze de date MySQL : 1
    Domenii parcate : 2
    Spatiu stocare : 400MB
    Pret : 6 euro/luna
    Cumpara
  • US 600

    Trafic / luna : 15 GB
    Conturi E-mail : 1000
    Subdomenii : 50
    Baze de date MySQL : 4
    Domenii parcate : 4
    Spatiu stocare : 600MB
    Pret : 8 euro/luna
    Cumpara
  • US 800

    Trafic / luna : 20 GB
    Conturi E-mail : 1000
    Subdomenii : 60
    Baze de date MySQL : 20
    Domenii parcate : 6
    Spatiu stocare : 800MB
    Pret : 10 euro/luna
    Cumpara
  • US 1000

    Trafic / luna : 25 GB
    Conturi E-mail : 1000
    Subdomenii : 80
    Baze de date MySQL : 20
    Domenii parcate : 10
    Spatiu stocare : 1000MB
    Pret : 14 euro/luna
    Cumpara
  • US 1200

    Trafic / luna : 35 GB
    Conturi E-mail : 1000
    Subdomenii : 100
    Baze de date MySQL : 20
    Domenii parcate : 15
    Spatiu stocare : 1200MB
    Pret : 20 euro/luna
    Cumpara