07.- Ajax con Jquery🌇 de 0 a 100 [ funcion ajax ]

Video: https://youtu.be/pIQsJ84kUWg
programadornovato · Jul 21, 2019 · cfbcb83 · cfbcb83
1 parent c99f645
commit cfbcb83
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 69 deletions.
diff --git a/index.html b/index.html
@@ -10,14 +10,7 @@
 <body>
 
   <div class="container mt-3">
-    <button type="button" class="btn btn-primary" id="leer" >Leer</button>
-    <button type="button" class="btn btn-danger" id="leerEmpleado" >Leer Empleado</button>
-    <button type="button" class="btn btn-warning" id="leerArregloEmpleado" >Leer Empleados</button>
-    <button type="button" class="btn btn-success" id="leerGetSON" >Leer Empleados getJSON</button>
-    <div class="form-group mt-2">
-      <label for="">Buscar por nombre</label>
-      <input type="text" class="form-control" id="nombre" >
-    </div>
+    <button type="button" class="btn btn-primary" id="ajax" >Ajax</button>
     <div class="alert alert-primary" role="alert">
       <strong id="datosEmpleado">Datos empleado</strong>
       <ul id="listaEmpleados">

diff --git a/javascript.js b/javascript.js
@@ -1,68 +1,24 @@
 $(document).ready(function () {
-    $("#leer").click(function (e) { 
+    $('#ajax').click(function (e) { 
         e.preventDefault();
-        $.get("archivo.txt",function(data,textStatus,jqXHR){
-            console.log(data);
-            //console.log(textStatus);
-            //console.log(jqXHR);
-        });
-    });
-    $('#leerEmpleado').click(function (e) { 
-        e.preventDefault();
-        $.get("empleados.json",function(data){
-            console.log(data);
-            $('#datosEmpleado').html(`
-            Nombre: ${data.nombre} <br>
-            Puesto: ${data.puesto} <br>
-            Edad: ${data.edad} <br>
-            `);
-        });
-    });
-    $('#leerArregloEmpleado').click(function (e) { 
-        e.preventDefault();
-        $('#listaEmpleados').html('');
-        $.get("empleados.json",function(data){
-            //console.log(data);
-            $.each(data, function (index, item) { 
-                 $('#listaEmpleados').html($('#listaEmpleados').html()+`
-                 <li> ${item.nombre} -- ${item.puesto} </li>
-                 `);
-            });
-        });
-    });
-    $('#leerGetSON').click(function (e) { 
-        e.preventDefault();
-        /*
-        $.getJSON("empleados.txt",function(data){
-            data=JSON.parse(data);
-            console.log(data);
-        });
-        */
-        $.getJSON("empleados.json",function(data){
-            console.log(data.empleados);
-            $('#listaEmpleados').html('');
-            $.each(data.temporales, function (index, item) { 
-                $('#listaEmpleados').html($('#listaEmpleados').html()+`
-                <li> ${item.nombre} -- ${item.puesto} </li>
-                `);
-           });
-        });
-    });
-
-    let empleados;
-    $.getJSON("empleados.json",function(data){
-        empleados=data.empleados;
-    });
-    $('#nombre').keyup(function (e) { 
         $('#listaEmpleados').html('');
-        let nombre=$(this).val();
-        $.each(empleados, function (indexInArray, item) { 
-            if(item.nombre.toLowerCase().indexOf(nombre.toLowerCase())!==-1){
-                $('#listaEmpleados').html($('#listaEmpleados').html()+`
-                <li> ${item.nombre} -- ${item.puesto} </li>
-                `);
+        $.ajax({
+            url:'empleados.json',
+            type:'get',
+            dataType:'json',
+            success:function(data){
+                console.log(data);
+                $.each(data.empleados, function (i, item) { 
+                     $('#listaEmpleados').html($('#listaEmpleados').html()+`
+                     <li> ${item.nombre} </li>
+                     `);
+                });
+            },
+            error:function(xhr,status,error){
+                console.log(xhr);
+                console.log(status);
+                console.log(error);
             }
         });
     });
-
 });