Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo recuperar registros de MySQL con jQuery AJAX - Laravel 8

 La recuperación de datos es uno de los requisitos básicos cuando se trabaja con la base de datos utilizando AJAX.

Mostrar datos basados ​​en el inicio de sesión del usuario, generar un informe, etc.

En este tutorial, muestro cómo puede obtener registros de la base de datos MySQL usando jQuery AJAX en Laravel 8.


1. Estructura de la mesa

  • Cree una nueva tabla employeesmediante la migración.
php artisan make: migración create_employees_table
  • Ahora, navegue a la database/migration/carpeta desde la raíz del proyecto.
  • Busque un archivo PHP que termine en create_employees_tabley ábralo.
  • Defina la estructura de la tabla en el up()método.
función pública arriba ()
{
    Schema :: create ('empleados', function (Blueprint $ table) {
       $ tabla-> bigIncrements ('id');
       $ tabla-> cadena ('nombre de usuario');
       $ tabla-> cadena ('nombre');
       $ tabla-> cadena ('correo electrónico');
       $ tabla-> marcas de tiempo ();
    });
}
  • Ejecute la migración -
php migrar artesanal
  • Se creó la tabla y le agregué algunos registros.

2. Configuración de la base de datos

Abrir .envarchivo.

Especifique el host, el nombre de la base de datos, el nombre de usuario y la contraseña.

DB_CONNECTION = mysql
DB_HOST = 127.0.0.1
DB_PORT = 3306
DB_DATABASE = tutorial
DB_USERNAME = raíz
DB_PASSWORD =

3. Modelo

  • Crear Employeesmodelo.
php artisan make: modelo Empleados
    • Abrir app/Models/Employees.phparchivo.
    • Especifique atributos de modelo asignables en masa: nombre de usuario, nombre y correo electrónico utilizando la $fillablepropiedad.

Código completo

<? php

Espacio de nombres App \ Models;

use Illuminate \ Database \ Eloquent \ Factories \ HasFactory;
use Illuminate \ Database \ Eloquent \ Model;

clase Empleados extiende Modelo
{
   use HasFactory;

   protegido $ rellenable = [
      'nombre de usuario', 'nombre', 'correo electrónico' 
   ];
}

4. Controlador

Crea un EmployeesControllercontrolador.

php artisan make: controller EmployeesController

Crea 3 métodos -

  • index () -employees Vista de carga .
  • getUsers (): este método se usa para manejar la solicitud AJAX GET.

Obtenga todos los registros de la employeestabla y asigne a $employeesAsignar $employees$response['data']matriz.

Devuelve $responseArray en formato JSON.

  • getUserbyid (): este método se utiliza para manejar la solicitud POST de AJAX. Leer el valor POST y asignarlo a la $useridvariable.

Buscar registro por id de la employeestabla. Asignar $employees$response['data']matriz.

Devuelve $responseArray en formato JSON.

Código completo

<? php

espacio de nombres App \ Http \ Controllers;

use Illuminate \ Http \ Request;
use Aplicación \ Modelos \ Empleados;

clase EmployeesController extiende Controller
{
   índice de función pública () {
     vista de retorno ('empleados');
   }

   getUsers de la función pública () {

     $ empleados = Empleados :: orderby ('id', 'asc') -> select ('*') -> get (); 
     
     // Obtener todos los registros
     $ respuesta ['datos'] = $ empleados;

     return respuesta () -> json ($ respuesta);
   }

   getUserbyid función pública (Solicitud $ solicitud) {

      $ userid = $ request-> userid;

      $ empleados = Empleados :: select ('*') -> donde ('id', $ userid) -> get ();

      // Obtener todos los registros
      $ respuesta ['datos'] = $ empleados;

      return respuesta () -> json ($ respuesta);
   }
}

5. Ruta

  • Abrir routes/web.phparchivo.
  • Definir 3 rutas -
    • / - Cargar vista de empleados.
    • / getUsers: se usa para enviar solicitudes GET de AJAX.
    • / getUsersbyid: se usa para enviar solicitudes POST AJAX.
<? php

use Illuminate \ Support \ Facades \ Route;
use App \ Http \ Controllers \ EmployeesController;

Route :: get ('/', [EmployeesController :: class, 'index']);
Route :: get ('/ getUsers', [EmployeesController :: class, 'getUsers']);
Route :: post ('/ getUserbyid', [EmployeesController :: class, 'getUserbyid']);

6. Ver

Crear employees.blade.phparchivo en formato resources/views/.

HTML

Cree un cuadro de texto para ingresar la identificación de usuario y 2 botones. El primer botón para recuperar el registro por identificación de usuario y el segundo botón para recuperar la lista de todos los usuarios.

Úselo <table id="empTable">para listar registros usando jQuery AJAX.

Texto

Lea el token CSRF de la <meta >etiqueta y asígnelo a la CSRF_TOKENvariable.

Defina el evento de clic en #but_fetchall#but_search.

Si #but_fetchallse hace clic en él, envíe la solicitud AJAX GET a 'getUsers', set dataType: 'json'En caso de devolución de llamada exitosa, pase responsea la createRows()función para crear filas de tabla.

Si #but_searchse hace clic en él, lea el valor del cuadro de texto y asígnelo a la useridvariable. Envíe la solicitud POST AJAX a 'getUserbyid', pase CSRF_TOKENuseridcomo datos, configure dataType: 'json'En caso de devolución de llamada exitosa, pase responsea la createRows()función para crear filas de tabla.

createRows (): vacío <table> <tbody>Si la response['data']longitud es mayor que 0, haga un bucle en response['data']y cree uno nuevo <tr >y agregue de lo #empTable tbodycontrario, agregue "No se encontró ningún registro" <tr>en <tbody>.

Código completo

<! DOCTYPE html>
<html>
<cabeza>
   <title> Cómo recuperar registros de MySQL con jQuery AJAX - Laravel 8 </title>

   <! - Meta ->
   <meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8">
   <meta charset = "utf-8">
   <meta name = "csrf-token" content = "{{csrf_token ()}}">
</head>
<cuerpo>
   <input type = 'text' id = 'search' name = 'search' placeholder = 'Enter userid 1-7'>
   <input type = 'button' value = 'Search' id = 'but_search'>
   <br/>
   <input type = 'button' value = 'Obtener todos los registros' id = 'but_fetchall'>

   <! - Tabla ->
   <table border = '1' id = 'empTable' style = 'border-collapse: collapse;'>
     <thead>
       <tr>
         <th> S.no </th>
         <th> Nombre de usuario </th>
         <th> Nombre </th>
         <th> Correo electrónico </th>
       </tr>
     </thead>
     <tbody> </tbody>
   </table>

   <! - Script ->
   <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>

   <tipo de secuencia de comandos = 'texto / javascript'>
   var CSRF_TOKEN = $ ('meta [nombre = "csrf-token"]'). attr ('contenido');
   $ (documento) .ready (function () {

      // Obtener todos los registros
      $ ('# but_fetchall'). click (function () {

         // Solicitud AJAX GET
         $ .ajax ({
           url: 'getUsers',
           tipo: 'obtener',
           dataType: 'json',
           éxito: función (respuesta) {

              createRows (respuesta);

           }
         });
      });

      // Buscar por ID de usuario
      $ ('# but_search'). click (function () {
         var idusuario = Número ($ ('# búsqueda'). val (). trim ());

         if (ID de usuario> 0) {

           // Solicitud POST AJAX
           $ .ajax ({
              url: 'getUserbyid',
              tipo: 'publicación',
              datos: {_token: CSRF_TOKEN, userid: userid},
              dataType: 'json',
              éxito: función (respuesta) {

                 createRows (respuesta);

              }
           });
         }

      });

   });

   // Crear filas de tabla
   function createRows (respuesta) {
      var len = 0;
      $ ('# empTable tbody'). empty (); // Vaciar <tbody>
      if (respuesta ['datos']! = nulo) {
         len = respuesta ['datos']. longitud;
      }

      if (len> 0) {
        para (var i = 0; i <len; i ++) {
           var id = respuesta ['datos'] [i] .id;
           var username = response ['datos'] [i] .username;
           var nombre = respuesta ['datos'] [i] .name;
           var email = response ['datos'] [i] .email;

           var tr_str = "<tr>" +
             "<td align = 'center'>" + (i + 1) + "</td>" +
             "<td align = 'center'>" + nombre de usuario + "</td>" +
             "<td align = 'center'>" + nombre + "</td>" +
             "<td align = 'center'>" + correo electrónico + "</td>" +
           "</tr>";

           $ ("# empTable tbody"). append (tr_str);
        }
      }demás{
         var tr_str = "<tr>" +
           "<td align = 'center' colspan = '4'> No se encontraron registros. </td>" +
         "</tr>";

         $ ("# empTable tbody"). append (tr_str);
      }
   } 
   </script>
</body>
</html>

7. Salida

Reproductor de video
00:00
00:41

8. Conclusión

En el ejemplo, le mostré formas GET y POST de recuperar datos.

Se requiere el token CSRF al enviar solicitudes POST de AJAX.

Si este tutorial te resultó útil, no olvides compartirlo.

Publicar un comentario

0 Comentarios