From cfbcb83464a2a71d5bf041f762adeefa48f075b5 Mon Sep 17 00:00:00 2001
From: Programador Novato <info@programadornovato.com>
Date: Sun, 21 Jul 2019 00:47:23 -0500
Subject: [PATCH] =?UTF-8?q?07.-=20Ajax=20con=20Jquery=F0=9F=8C=87=20=20de?=
 =?UTF-8?q?=200=20a=20100=20[=20funcion=20ajax=20]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Video:
https://youtu.be/pIQsJ84kUWg
---
 index.html    |  9 +-----
 javascript.js | 78 +++++++++++----------------------------------------
 2 files changed, 18 insertions(+), 69 deletions(-)
diff --git a/index.html b/index.html
index 0236f74..f292e6a 100644
--- 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
index d2a6379..2379e87 100644
--- 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);
             }
         });
     });
-
 });
\ No newline at end of file
