Mostrando entradas con la etiqueta Ajax. Mostrar todas las entradas
Mostrando entradas con la etiqueta Ajax. Mostrar todas las entradas

Laravel: Ejemplo básico Ajax

Después del <head> de nuestra plantilla header:
<meta name="csrf-token" content="{{ csrf_token() }}">

En el footer.blade.php:
<script>
  $.ajaxSetup({
      headers: {
          'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
  });
</script>

En routes/web.php:
Route::get('admin/users/prueba_ajax', 'LoqueseaController@prueba_ajax')->name("prueba_ajax");
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name("ajaxRequestPost");

En LoqueseaController:
public function prueba_ajax(Request $request) {
return view("admin/users/prueba_ajax");
}

En prueba_ajax.blade.php:
@section("contenidoMain")
<h1>PRUEBA AJAX</h1>
<p>NUM1: <input type="text" id="num1"></p>
<p>NUM2: <input type="text" id="num2"></p>
<p>RESULT: <input type="text" id="result"></p>
<input id="btnAjax" type="button" value="Multiplicar">
@endsection

@section("js_own")
<script>
$(function() {
    $('#btnAjax').click(function(){
       $.ajax({
          type:'post',
          url:'{{ route('ajaxRequestPost') }}',
          data:{
              'num1':  $("#num1").val(),
              'num2':  $("#num2").val()
          },         
          success: function (data) {
               $("#result").val(data)
          }
       });
    });
});
</script>
@endsection

En AjaxController.php:
use Illuminate\Http\Request;
...
public function ajaxRequestPost(Request $request)  {
return $request->num1*$request->num2;
}

Autocomplete con Ajax

Primero tener en el header y el footer añadido los CDN de los CSS y JS de  JQueryui.

En una view tenemos:
<label>Película</label>
<input type="hidden" name="id_pelicula" id="id_pelicula" value="0">
<input type="text" name="labelPelicula" id="labelPelicula" nameId="id_pelicula" class="form-control soyPelicula" style="width:100%;">

En una nuestro footer.blade.php ponemos:
@include("ajax_lsg");

En ajax_lsg.blade.php:
$(".soyPelicula").autocomplete({
minLength : 2, // debe escribir 2 caracteres como mínimo
source : function(request, response) {
$.ajax({
type: "POST",
url : "{{ route('ajaxRequestPost') }}",
dataType : "json",
data : {
tabla: "peliculas",
buscar: request.term,
maxRows: 10
},
success : function(data) {
// console.log("DATOS ARRAY:");
// console.log(data);

response($.map(data, function(item) {
return {
label : item.tit_pelicula,
value: item.id
}
}));
}
});
},
select : function(event, ui) {
idAux = $(this).attr("nameId");
labelAux = $(this).attr("name");
console.log(idAux+" "+labelAux);
$("#"+idAux).val(ui.item.value);
$("#"+labelAux).val(ui.item.label);
return false;
},
open : function() {
},
close : function() {
}
});

En routes/web.php:
Route::get('ajaxRequest', 'AjaxController@ajaxRequest')->name('ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost')->name('ajaxRequestPost');

En AjaxController:
// ****************************************
// ****************************************
public function get_peliculas_ac($buscar) {
$arrPel = DB::table('peliculas')
->select('peliculas.id', 'peliculas.titulo', 'peliculas.anno')
->where('titulo', 'like', '%'.$buscar.'%')
->orderby('titulo')
->get();

$newArr = array();
foreach ($arrPel as $clave=>$valor) {
$datos = array();
$datos["id"] = $valor->id;
$datos["tit_pelicula"] = $valor->titulo." (".$valor->anno.")";
$newArr[] = $datos;
}
$salida = json_encode($newArr);
echo $salida;
}

// ****************************************
// ****************************************
public function ajaxRequestPost()  {
if ($_POST["tabla"] == "peliculas") {
echo $this->get_peliculas_ac($_POST["buscar"]);
}
if ($_POST["tabla"] == "cineastas") {
echo $this->get_cineastas_ac($_POST["buscar"]);
}
}

Ajax: Incluir el X-CSRF-TOKEN

Lo mejor es incluirlo en el footer.blade.php:
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    });
</script>

Multidiomas: con Ajax

a) En routes/web.php:
Route::get('ajaxRequest', 'AjaxController@ajaxRequest');
Route::post('ajaxRequest', 'AjaxController@ajaxRequestPost');

b) En funciones.js
function switchLang(locale) {
    $.ajax({
        type:'POST',
        url:'http://localhost/edc_laravel/public/ajaxRequest', // Hasta q sepa como sacar la ruta root
        data:{
            locale: locale
        },
        success:function(data){
            location.reload();
        }
    });
}

c) En header.blade.php:
{{app()->setLocale(session()->get('language'))}}
...
<li><a href="javascript:void(0);" onclick="switchLang('es');">ESP</a></li>
<li><a href="javascript:void(0);" onclick="switchLang('en');">ING</a></li>

d) En el middleware Language.php:
public function handle($request, Closure $next)
    {
        app()->setLocale(session()->get('language'));
        return $next($request);
    }

e) En AjaxController:
public function ajaxRequestPost()  {
  session(['language' => request()->locale]);
  App::setLocale(request()->locale);
  return request()->locale;
}