Laravel Ajax tutorial

- Lucru cu csrf_token care expira

Ajax (Asynchronous JavaScript and XML) permite aplicatiei web din browser sa trimita si sa primeasca date de la server in mod asincron, fara sa reincarce pagina.
Ajax foloseste JavaScript pe partea de client (in browser) si un script pe partea de server (in acest caz PHP) care primeste cererea Ajax si trimite un raspuns inapoi la JavaScript.

Cand se trimit cereri POST /PUT /DELETE la framework-ul Laravel, acesta verifica un "csrf_token" care este un sir generat automat de Laravel.
Astfel, cand construiti aplicatii Ajax cu Laravel, trebuie sa atasati sirul CSRF la fiecare apel POST, ca o valoare in datele transmise cu POST, sau intr-un header trimis serverului.
Functia csrf_token() returneaza sirul CSRF. Pentru a-l folosi in scriptul Ajax, adaugati, spre exemplu, "csrf_token" intr-o variabila JavaScript, in sectiunea HEAD a fisierului template:

<head>
<title>Page Title</title>
<script>
var csrf_token ='{{csrf_token()}}';
</script>
</head>

Apoi, puteti adauga valoarea variabilei csrf_token in apelul Ajax.

- Pentru a adauga "csrf_token" in datele POST, atasati-l la numele "_token" in datele trimis catre server:

function ajax(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object
  var data ='_token='+ csrf_token;
  //...
}

- Sau trimiteti 'csrf_token' intr-un header cu "X-CSRF-TOKEN":

function ajax(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  req.open('POST', 'ajax/send', true); // set the request

  //adds headers
  req.setRequestHeader('Content-type', 'application/x-www-form-urlenecodd');
  req.setRequestHeader('X-CSRF-TOKEN', '{{csrf_token()}}');
  //...
}

- Cu jQuery:

headers: {
  'X-CSRF-TOKEN': '+ csrf_token
},

Exemplu Laravel - Ajax

1. Creati un fisier view: resources/views/test_ajax.blade.php si copiati codul urmator in acest fisier.

<!doctype html>
<html lang="en">
<head>
<title>Laravel Ajax Test Example</title>
<script>
var csrf_token ='{{csrf_token()}}';
</script>
</head>
<body>
<h1>Laravel Ajax Test Example</h1>
<div id='see_resp'>
Acest mesaj va fi inlocuit cu un raspuns Ajax. Un array JSON trimis de la server.<br>
Apasati pe buton pentru a inlocui mesajul.
</div>
<button id='btn_ajax'>Test Ajax</button>

<script>
var see_resp = document.getElementById('see_resp');

//sends data to server, via POST, and displays the received answer
function ajaxReq(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  //pairs index=value with data to be sent to server (including csrf_token)
  var data ='_token={{csrf_token()}}&id=1';

  req.open('POST', 'ajax/send', true); // set the request

  //adds header for POST request
  req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  req.send(data); //sends data

  // If the response is successfully received, will be added in #see_resp
  req.onreadystatechange = function(){
    if(req.readyState ==4){
//    alert(req.responseText); //just for debug
      see_resp.innerHTML = req.responseText;
    }
  }
}

//register click event on #btn_ajax
document.getElementById('btn_ajax').addEventListener('click', ajaxReq);
</script>
</body>
</html>

Daca folositi jQuery, schimbati codul din elementul <script> care e inainte de </body> cu acest script jQuery:

<script>
function ajaxReq(){
  $.ajax({
    type:'POST',
    url:'/ajax/send',
    headers: {
      'X-CSRF-TOKEN': csrf_token
    },
    data:'id='+ 1,
    success:function(resp){
      $('#see_resp').html(JSON.stringify(resp));
    }
  });
}

$('#btn_ajax').on('click', ajaxReq);
</script>

2. Acum vom crea un controller numit AjaxController. Copiati urmatorul cod in fisierul app/Http/Controllers/AjaxController.php.

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;

class AjaxController extends Controller {

  //Responds to requests to /ajax
  //returns view() response
  public function index(Request $request){
    return view('test_ajax');
  }

  //Responds to post requests to /ajax/send
  //receives the $request instance
  //returns response with a JSON array, with input id, and Laravel version
  public function send(Request $request){
    //if required fields are received, and not empty
    if($request->has(['id']) && $request->id!=null){
      global $app;
      return response()->json(['id'=>$request->id, 'version'=>$app::VERSION]);
    }
    else return 'Not valid id.';
  }
}

3. Pentru a fixa Rutele, adaugati urmatoarele linii in routes/web.php.

//shows the ajax test page
Route::get('/ajax', 'AjaxController@index');

//when ajax request
Route::post('/ajax/send', 'AjaxController@send');

4. Accesati urmatoarea adresa URL pentru a testa acest exemplu.

//localhost:8000/ajax

- Va afisa o pagina cu un continut ca in acest Demo:

Laravel Ajax Test Example

Acest mesaj va fi inlocuit cu un raspuns Ajax. Un array JSON trimis de la server.
Apasati pe buton pentru a inlocui mesajul.

Lucru cu csrf_token care expira

Ca sa pastrati o pagina activa cu Ajax mai mult de 120 de minute (care este durata implicita a sesiunii Laravel), trebuie sa reinitializati valoarea csrf_token in javascript, deoarece si acel token va expira.
- Spre exemplu, puteti folosi acest script care obtine si stocheaza in JavaScript sirul 'csrf_token' la fiecare 30 de minute.

1. In fisierul view:

<script>
//Laravel csrf_token used in Ajax requests
var csrf_token ='{{csrf_token()}}';

//get csrf_token from Laravel
function getCsrf(){
  var req = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');  // XMLHttpRequest object

  req.open('POST', '/ajax/getcsrf', true); // set the request

  //adds header for POST request
  req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  req.setRequestHeader('X-CSRF-TOKEN', csrf_token);

  req.send('_token={{csrf_token()}}'); //sends csrf_token

  // If the response is successfully received, sets csrf_token
  req.onreadystatechange = function(){
    if(req.readyState ==4){
      var resp = JSON.parse(req.responseText);
      if(resp.csrf) csrf_token = resp.csrf;
    }
  }
}

//calls getCsrf() every 30 mintes
window.setInterval(getCsrf, 30*60*1000);
</script>

- Sau cu jQuery:

<script>
//Laravel csrf_token used in Ajax requests
var csrf_token ='{{csrf_token()}}';

//get csrf_token from Laravel
function getCsrf(){
  $.ajax({
    type:'POST',
    url:'/ajax/getcsrf',
    headers: {
      'X-CSRF-TOKEN': csrf_token
    },
    data:'_token='+ csrf_token,
    success:function(resp){
      if(resp.csrf) csrf_token = resp.csrf;
    }
  });
}

//calls getCsrf() every 30 minutes
window.setInterval(getCsrf, 30*60*1000);
</script>

2. In routes/web.php adaugati acest Route:

//ajax request for csrf_token. Returns json array with csrf_token value
Route::post('/ajax/getcsrf', function(){
  return response()->json(['csrf'=>csrf_token()]);
});

- De asemenea, puteti sa mariti durata sesiunii schimband valoarea cheii 'lifetime' in fisierul config/session.php.

<<-Baza de Date MySQL .. -- Paginare rezultate din Baza ..->>

Laravel Ajax tutorial

Curs Php-mysql

Exemplu Laravel - Ajax

Lucru cu csrf_token care expira

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Last accessed pages

Popular pages this month