jQuery metoda ajax() 13

Byadmin

Metoda ajax() se foloseste pentru a efectua o cerere AJAX (asynchronous HTTP) la server.
Toate functiile Ajax jQuery: load(), get(), post(); folosesc metoda ajax(). Aceasta contine mai multe optiuni de configurare si prelucrare a datelor, iar sintaxa ei este mai complexa.

  Sintaxa:

$.ajax({ nume:valoare, nume:valoare, ...})

– Parametri reprezinta una sau mai multe perechi nume:valoare, care configureaza cererea Ajax. Sunt prezentati mai jos, dar mai intai iata un exemplu simplu cu o cerere Ajax prin POST:

$.ajax({
  type: 'POST',
  url: 'script.php',
  data: 'nume=un_nume&id=un_id',
  success: function(raspuns){
    $('#result').html(raspuns);
  }
});

Datele: „nume=un_nume&id=un_id” sunt trimise pe server la „script.php” prin POST, apoi, raspunsul de la server e adaugat intr-un element HTML (cu id=”result”).

Optiuni pentru jQuery ajax

Iata cateva optiuni (perechi nume/valoare) ce pot fi utilizate pentru configurarea cererii Ajax.
– „xhr” reprezinta obiectul XMLHTTPRequest.

    async   – o valoare Booleana (true sau false), care seteaza daca cererea trebuie facuta asincron sau nu (prestabilit: true). Cererile intre domenii diferite sau cu dataType:”jsonp”; nu suporta operatii sincron (simultane).

$.ajax({
  url: "file.php",
  async: false
});


    beforeSend(xhr)   – o functie care sa fie executata inainte de trimitere cerere. Poate fi utilizata si pentru definirea de headers care sa fie transmise.

$.ajax({
  url: "file.php",
  beforeSend: function() {
    xhr.setRequestHeader("Accept", "text/javascript");
    $('#resp').html('Loading...');
  },
  success: function(raspuns){
    $('#resp').html('raspuns');
  }
});


    cache   – o valoare Booleana care indica browser-ului daca sa adauge sau nu in cache pagina accesata (prestabilit: true, si false pt. dataType ‘script’ sau ‘jsonp’).

$.ajax({
  url: "file.html",
  cache: false
});


    complete(xhr, status)   – o functie care va fi executata dupa ce e trimisa cererea (dupa executia functiilor de la ‘success’ si ‘error’).

$.ajax({
  url: "file.php",
  complete: function() { alert('Trimis complet'); }
});


    contentType   – tipul de continut utilizat la trimiterea de date la server (prestabilit: ‘application/x-www-form-urlenecodd’).

$.ajax({
  type: "POST",
  url: "file.php",
  data: "{'nume1':'valoare', 'nume2':'valoare'}",
  contentType: "application/json; charset=utf-8",
  dataType: "json"
});


    context   – specifica valoarea lui „this” pentru functiile legate de rezultatul AJAX returnat.

$.ajax({
  url: "file.php",
  context: $('#idd'),
  success: function(){
    $(this).html('Succes');       // this va fi "#idd"
  }
});


    data   – datele care vor fi trimise la server. Sunt transformate in sir (string).

$.ajax({
  type: "GET",
  url: "file.php",
  data: "id=78&nume=un_nume"
});


    dataFilter(data, type)   – o functie utilizata pentru a gestiona datele de raspuns din obiectul XMLHttpRequest. Este o functie de pre-filtrare a raspunsului. Functia accepta doua argumente: „data” (datele returnate de server), „type” (dataType – tipul de date).

$.ajax({
  url: "file.php",
  data: {'json':'datas'},
  contentType: "application/json; charset=utf-8",
  dataFilter: function(data) {
    var resp = eval('(' + data + ')');
    return resp;
  },
  success: function(raspuns, status, xhr){
    $('#idd').html(raspuns.property);
  }
});


    dataType   – Tipu de date asteptat ca raspuns de la server.
„xml”: Returneaza un document XML ce poate fi procesat prin jQuery.
„html”: Returneaza cod HTML; scripturile JavaScript incluse in acest cod sunt evaluate la adaugarea in DOM.
„script”: Evalueaza raspunsul ca pe un cod JavaScript si-l returneaza sub forma de text.
„json”: Evalueaza raspunsul ca tip JSON si returneaza obiectul JavaScript continut in acel format JSON.
„jsonp”: Incarca intr-un JSON folosind JSONP.
– Daca nu e specifcat nici un tip, jQuery va stabili dataType in functie de tipul MIME din raspuns.

$.ajax({
  // Incarca si executa un fisier JavaScript
  type: "GET",
  url: "file.js",
  dataType: "script"
});


    error(xhr, status, error)   – functie care sa fie executata in caz ca apare vreo eroare la cererea Ajax.

$.ajax({
  url: "file.php",
  error: function(xhr, status, error) { alert(error); }
});


    global   – o valoare Booleana ce specifica daca va declansa sau nu evenimentele Ajax (prestabilit: true). Setati false daca vreti sa opriti declansarea evenimentelor precum ajaxStart sau ajaxStop.

$.ajax({
  url: "file.php",
  global: false,
  success: function(msg){
    alert(msg);
  }
});


    headers   – perechi tip/valoare cu headere aditionale care sa fie trimise la server. Acestea se adauga inainte de functia beforeSend; defapt, orice valoare din optiunea „headers” poate fi rescrisa in functia de la beforeSend.

$.ajax({
  headers: { "Content-Type": "application/json", "Accept": "application/json" },
  type: "POST",
  url: "file.php",
  data: {'json': 'data'},
  dataType: "json",
  success: function(json){
    // do something...
  }
});


    ifModified   – o valoare Booleana, daca e setata true, determina cererea sa fie considerata „success” doar daca raspunsul s-a modificat de la ultima cerere. Aceasta se realizeaza prin verificarea ultimului header modificat (prestabilit: false).

$.ajax({
  url: "file.php",
  ifModified: true,
  success: function(data, status){
    if(status!="notmodified") {
      $("#display").append(data);
    }
  }
});


    jsonp   – un nume care retine sirul transmis in format JSON (adaugat in „data”). Acest nume va fi utilizata in loc de ‘callback‘, ca parte din sirul ce reprezinta adresa URL (‘callback=?‘). Astfel, {jsonp:’onJSONPLoad’} va rezulta in ‘onJSONPLoad=?’, transferat la server.

// jQuery va schimba adresa URL ca sa contina &jsonp=jsonpmethod
$.ajax({
  dataType: 'jsnp',
  data: 'id=10',
  jsonp: 'jsnp',
  url: "file.php",
});


    password   – un sir cu o parola utilizata pentru acces HTTP ce necesita autentificare.
    usernume   – un sir cu un nume utilizata pentru acces HTTP ce necesita autentificare.

$.ajax({
  url: "file.php",
  usernume: 'nume',
  password: 'parola',
  success: function(raspuns){
    $("#display").html(raspuns);
  }
});


    processData   – o valoare Booleana care specifica daca datele transmise la server trebuie sau nu transformate in sir (prestabilit: true). Daca vreti sa trimiteti un document DOM (precum XML), setati false aceasta optiune.

// trimite un document XML la server
var xmlDocument = [create xml document];
 $.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
  success: function(raspuns){
    $("#display").html(raspuns);
  }
 });


    scriptCharset   – determina cererea sa fie interpretata cu un anumit set de caractere. Numai pentru date transmise cu dataType „jsonp” sau „script”, si prin „GET”.

$.ajax({
  type: "GET",
  url: "file.php",
  scriptCharset: "utf-8",
  contentType: "application/x-www-form-urlenecodd; charset=UTF-8",
  data: "id=12&nume=un_nume",
  success: function(raspuns){
    $("#idd").html(raspuns);
  }
  
});


    statusecod   – un set cu percechi numar: function(), unde numar e un cod HTML, iar function() e functia care va fi executata cand raspunsul are acel cod.

// alert cand raspunsul are codul HTML 404
$.ajax({
  url: "file.php",
  statusecod: {
    404: function() {
      alert('pagina nu e gasita');
    }
  }
});


    success(raspuns, status, xhr)   – o functie ce va fi executata cand cererea Ajax returneaza „success” in parametru „status”.

$.ajax({
  url: "file.php",
  data: 'id=un_id',
  success: function(raspuns, status, xhr){
    if(status=="success") {
      $("#display").html(raspuns);
    }
    else { alert(status+ ' - '+ xhr.status); }
  }
});


    timeout   – seteaza un timp local de expirare (in milisecunde) in care cererea Ajax poate astepta raspunsul de la server.

// asteapta raspunsul maxim 3000 milisecunde
$.ajax({
  url: "file.php",
  timeout: 3000,
  success: function(){
    $("#response").text('Success');
  }
});


    type   – tipul prin care sunt transmise datele: GET sau POST (prestabilit: GET). Se pot folosi si alte tipuri, adaugate in HTML5: PUT si DELETE.

$.ajax({
  type: "POST",
  url: "file.php",
  data: 'nume=un_nume&pass=parola',
  success: function(raspuns){
    $("#idd").text(raspuns);
  }
});


    url   – un sir cu adresa URL la care e trimisa cererea Ajax (prestabilit: pagina curenta).

$.ajax({
  url: "file.php",
  success: function(raspuns){
    $("#idd").text(raspuns);
  }
});

Exemplu script jQuery Ajax – PHP

Sa vedem un exemplu complet cu ajax() si PHP.
Se creaza o pagina web cu un formular ce contine o caseta text pentru nume, o lista <select> cu optiuni si un textarea pt. comentarii.
Cand userul trimite formularul, se foloseste jQuery Ajax pentru a trimite datele din formular la un script PHP (intr-un fisier denumit script.php) care va procesa datele si returneaza un sir cu cod HTML. Daca cererea este efectuata cu succes, raspunsul de la scriptul PHP va fi inclus intr-un <div> (cu id=”resp”), fara reincarcarea paginii. In caz de eroare, va fi afisata o fereastra Alert cu acea eroare.
Iata codul pt. scriptul PHP, apoi pt. pagina cu jQuery Ajax (pt. mai multe detalii, vedeti comentariile din coduri).

Fisierul script.php

<?php
// defineste un Array cu adrese pt diferite cursuri
$crs = array(
  'altu'=>'',
  'php-mysql'=>'php-mysql',
  'javascript'=>'javascript',
  'actionscript'=>'flash/actionscript-3_e',
  'jquery'=>'javascript/curs-jquery-tutoriale-js'
);
// verifica daca sunt date trimise prin POST, cu iindice "nm", "cs", si "cmt"
if(isset($_POST['nm']) && isset($_POST['cs']) && isset($_POST['cmt'])) {
  $_POST = array_map("strip_tags", $_POST);       // sterge posibile tag-uri din POST
  // preia datele
  $nm = $_POST['nm'];
  $cs = $_POST['cs'];
  $cmt = $_POST['cmt'];
  // defineste o variabila ce va contine raspunsul returnat de script
  $rehtml = '<h4>Hy '. $nm. '</h4> Link-ul pentru Curs <b>'. $cs. '</b>: <a href="http://www.discant.net/'. $crs[$cs]. '">'. $cs. '</a><br />Comentariul dv.: <i>'. $cmt. '</i>';
}
else $rehtml = 'Date nevalide';
echo $rehtml;        // returneaza raspunsul
?>

Pagina cu codul HTML si jQuery

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Ajax - PHP</title>
<script type="text/javascript" src="jquery_1.6.1.js"></script>
<script type="text/javascript"><!--
$(document).ready(function() {
  // cand formularul "#crs" e trimis
  $('#crs').submit(function() {
    // preia datele din formular
    var nm = $('#crs #nm').val();
    var cs = $('#crs #cs').val();
    var cmt = $('#crs #cmt').val();
    // pune date din formular in format JSON, care va fi trimis la server
    var data_json = {'nm':nm, 'cs':cs, 'cmt':cmt};
    // seteaza functia ajax() sa trimita datele prin POST la "script.php"
    // daca apare vreo eroare, afiseaza o fereastra Alert cu starea cererii (xhr.status) si eroarea
    // la "success", plaseaza raspunsul intr-un element HTML cu id="resp"
    $.ajax({
      type: 'post',
      url: 'script.php',
      data: data_json,
      beforeSend: function() {
        // inainte sa trimita cererea, afiseaza o notificare de "Incarcare..." messaj in locul unde va fi adaugat raspunsul
        $('#resp').html('Incarcare...');
      },
      timeout: 10000,        // seteaza timpul de expirare (10 secunde)
      error: function(xhr, status, error) { alert('Eroare: '+ xhr.status+ ' - '+ error); },
      success: function(raspuns) { $('#resp').html(raspuns); }
    });
    return false;      // necesar ca sa nu deschida pagina cu adresa din formular cand e trimis
  });
});
--></script>
</head>
<body>
<div id="resp"></div>
<h4>Completati formularul:</h4>
<form action="script.php" method="post" id="crs">
 Nume: <input type="text" name="nm" id="nm" /><br />
 Curs: <select name="cs" id="cs">
  <option value="altu">Altu</option>
  <option value="php-mysql">PHP-MySQL</option>
  <option value="javascript">JavaScript</option>
  <option value="actionscript">ActionScript</option>
  <option value="jquery">jQuery</option>
 </select><br />
 Comentarii:<br />
 <textarea name="cmt" id="cmt" cols="20" rows="3"></textarea>
 <input type="submit" value="Trimite" />
</form>
</body>
</html>

Demo:

Completati formularul:

Nume:
Curs:


Comentarii:

Similar Posts

jQuery parent, children si nth-child() 21

Byadmin

Acest tutorial arata cum se lucreaza cu legaturile parinte (parent) si copii (children) in jQuery.– parent se refera la elementul parinte in care este inclus direct alt element, denumit copil (child).De exemplu, in acest cod HTML: <div id=”parent_tag”>  <p id=”child_tag”>Text oarecare…</p>  <span>Alt element copil in „parent_tag”.</span> </div> – DIV-ul („parent_tag”) este elementul parinte pentru paragraf…

Inregistrare evenimente la elemente incluse cu jQuery ajax 20

Byadmin

Pentru a inregistra cu jQuery un eveniment JavaScript la elemente HTML, se foloseste aceasta sintaxa: $(‘element’).nume_eveniment(function() {   // cod ce va fi executat cand „nume_eveniment” e declansat }) De exemplu, urmatorul cod afiseaza o fereastra alert cand se apasa clic pe un link cu class=”cls”. <script type=”text/javascript”><!– $(document).ready(function() {   // la clic pe…

Schimba fisierul CSS cu jQuery 19

Byadmin

Acest tutorial arata cum puteti schimba fisierul CSS inclus in pagina dv. web, folosind jQuery.De exemplu, daca avem 2 fisiere CSS, „style.css” si „style2.css”, putem defini un cod jQuery ca sa alterneze fisierul CSS inclus in pagina, intre aceste 2 fisiere, cand utilizatorul apasa click pe un anumit element. Iata un exemplu, o pagina simpla…

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *